1.vue中计算属性computed的基本使用
<div>{{this.msg1}}</div>
<div @click=changeCount(5)>修改count的值</div>
data(){
msg:'11',
count:2
},
//与computed与data同级
//computed中声明的函数名就是参数名 可以直接使用 例如{{msg1}} 无需在data中声明
//计算机属性中必须有return return内容作为msg1的值
//msg1中涉及的变量(this.msg、this.count)的改变 将会触发函数 类似于事件监听
computed:{
mesg1:function(){
return 'computed'+this.msg+this.count
}
},
methods:{
changeCount(val){
this.count=val;
}
}
2.计算属性中的setter、getter
<div>{{this.msg1}}</div>
<div>{{this.msg}}</div>
<div @click=changeMsg1(5)>修改msg1的值</div>
data(){
msg:'',
count:2
},
computed:{
msg1:{
//读取msg1的时候会触发get方法 通过return中的内容获取到msg1的值
get:function(){
return 'computed'+this.msg
}
//修改msg1的值的时候会触发set方法
//这个方法有一个参数 参数的值就是为msg1修改的值
set:function(val){
this.msg=val
}
}
},
methods:{
changeMsg1(val){
//执行这句话的时候就会执行computed中的set函数
this.msg1=val
}
3.计算属性和事件监听的区别
事件监听:只监听当前值的变化
计算属性:如果计算属性绑定的值涉及到多个变量,每一个变量的变化都会被监听