计算属性 (computed)
- 在computed属性对象中定义计算属性的方法;在页面中使用 {{方法名}} 来显示计算的结果
例如在下面的input中,如果要让该文本框内容本更,可以结合computed属性来完成,其中必须要用v-model命令进行绑定
<input type="text" placeholder="First Name" v-model="firstName"/>
computed:{
//什么时执行: 初始化显示 / 相关的data属性数据放生改变
firstName(){// 计算属性中的一个方法,方法的返回值作为属性值
return this.firstName + '计算后的数据';
},
}
- 计算属性高级
通过getter/setter实现对属性数据的显示和监视;
切记:计算属性存在缓存,多次读取只执行一次getter计算
firstName:{
//回调函数 当需要都去当前属性值时回调, 根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + '计算后的数据';
},
//回调函数 监视当前属性值的变化 当属性值发生改变时回调,更新相关的属性数据
set(value){// value 就是firstName的最新属性值
this.firstName = '1111';
}
}
监视属性 (watch)
- 通过vm对象的 $watch() 或 watch配置来监视指定的属性。
当属性变化时,回调函数会自动调用,在函数内部进行计算;
其中监视分为配置监视和vue的实例方法
watch:{// 此为配置监视
firstName(newValue, oldValue){
return this.firstName + '计算后的数据';
},
}
- vue实例方法监视
vm.$watch('firstName',function(newValue, oldValue){
this.firstName = newValue + '计算后的数据';
})
注意:每一个属性都有一个对应的set/get放到,它们均为回调函数;其中get方法的作用是返回当前属性的值,set(value)方法为监视作用,一但属性值更改后就会触发,value为最新的值