// 例-1
<div id="example">{{a}}-{{b}}</div>
<script>
let vm = new Vue({
el : '#example',
data : {
a : 1
},
// 计算属性需要添加computed
// 计算属性不管变量值是否改变 只要页面引用了变量b
// 或者页面里调用了变量b就会执行b方法
// computed 和 watch的区别是 watch必须改变值才会触发
computed : {
b (){
c('b');
return this.a + 1;
}
}
});
</script>
// 例-2
<div id="example">{{firstName}}-{{lastName}}-{{fullName}}</div>
<script>
let vm = new Vue({
el : '#example',
data : {
firstName : 'Foo',
lastName : 'Bar'
},
// 计算属性需要添加computed b的值也会影响a的值
// 计算属性不管变量值是否改变 只要页面引用了变量b 或者页面里调用了变量b就会执行b方法
// computed和watch的区别是 watch只有变量改变了才会触发
computed : {
fullName : {
// 计算属性默认只有get 当页面引用变量或者js里调用变量会执行
get (){
return this.firstName + ' ' + this.lastName;
},
// 设置了set 可以监听fullName变量 变化后就调用set
set (newValue){
this.firstName = 'firstName我改变了';
this.lastName = 'lastName我改变了';
}
}
}
});
// 2秒后改变 fullName的值 触发set
// 重新设置firstName lastName
setTimeout(()=>vm.fullName = '小花', 2000);
</script>