## 计算属性和侦听器 ### 计算属性 1.语法 ~~~ <div id="example"> <div>{{firstName + lastName}}</div> </div> <div id="example"> <div>{{fullName}}</div> </div> ~~~ ~~~ var vm = new Vue({ el: '#example', data: { firstName: 'Hello', lastName: 'Bob' }, computed: { fullName:function() { return this.firstName + ' ' + this.lastName } } }) ~~~ ### 侦听器 ~~~ <div id="app"> {{age}} </div> ~~~ ~~~ var vm = new Vue({ el: '#example', data: { age: '12' }, watch: { age:function(newVal, oldVal) { // 需要做出的响应 } } }) ~~~ ### 课后习题 1.下面代码执行后，页面显示什么内容？ ~~~ <div id="app">{{address}}</div> new Vue({ el: '#app', data: { province: '江苏省', city: '南京市' }, computed: { address: function(){ return this.province + '/' + this.city } } }) ~~~ ~~~ <div id="app">{{age}}</div> var vm=new Vue({ el: '#app', data: { age: 12 }, watch: { age: function(newAge, oldAge){ if (!/^[0-9]$|^[1-9]\d+$/.test(newAge)) { alert('年龄格式有误！') } } } }) vm.age='1232' vm.age=12323 ~~~