## 計算屬性和偵聽器 ### 計算屬性 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 ~~~