1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算属性和监听</title> 6 <script src="lib/js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 1.计算属性， 11 在computed属性对象中定义计算属性的方法 12 在页面中使用{{方法名}}来显示计算结果 13 2.监视属性， 14 通过vm对象的$watch（）或watch配置来监视指定的属性 15 当属性变化时，回调函数自动调用，在函数内部进行计算 16 3.计算属性高级 17 通过getter/setter实现对属性数据的显示和监视 18 计算属性存在缓存，多次读取只执行一次getter计算 19 20 getter： 属性的get方法 21 setter： 属性的set方法 22 --> 23 <div id="app"> 24 姓<input type="text" v-model="firstName" /><br /> 25 名<input type="text" v-model="lastName" /><br /><br /> 26 27 姓名1（单向）<input type="text" v-model="fullName1" /><br /> 28 姓名2（单向）<input type="text" v-model="fullName2" /><br /> 29 姓名3（双向）<input type="text" v-model="fullName3" /> 30 31 </div> 32 <script> 33 var vm = new Vue({ 34 el:'#app', 35 data:{ 36 firstName:'A', 37 lastName:'B', 38 // fullName1:'A B' 39 fullName2:'A B' 40 }, 41 computed:{ 42 // 什么时候执行： 43 // 1.初始化显示时 44 // 2.相关的data数据改变时 45 fullName1(){ // 计算属性中的一个方法，方法的返回值作为属性值 46 console.log('fullName1()'); 47 return this.firstName +' '+ this.lastName 48 }, 49 fullName3:{ 50 //回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值 51 get(){ 52 return this.firstName +' '+ this.lastName 53 }, 54 //回调函数（监视），当属性值发生改变时回调，更新相关的属性数据 55 set(value){ //value就是更新的fullname3 56 const names = value.split(' '); 57 this.firstName = names[0]; 58 this.lastName = names[1] 59 } 60 } 61 62 }, 63 watch:{ //配置监视 64 firstName:function (value) { //firstname发生了变化 65 // this 就是 vm 对象 66 this.fullName2 = value + ' '+ this.lastName 67 } 68 } 69 }); 70 vm.$watch('lastName',function (value) {//更新fullname2 71 this.fullName2 = this.firstName + ' ' + value 72 73 }) 74 </script> 75 </body> 76 </html>
