computed 计算属性:通过属性计算得来的属性
计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值
a:<input type="number" v-model.number="a" />
b:<input type="number" v-model.number="b" />
<!--c:<input type="number" v-model.number="c" />-->
总和:{{sum()}}
总和:{{count}}
平均值:{{avg}}
<p v-once>单价:{{price}}</p>
<p>数量:<input type="number" v-model.number="count"/></p>
<p>总价:{{sum}}</p>
<p>运费:{{free}}</p>
<p>应付:{{pay}}</p>
data: {
a: '',
b:'',
c:'',
price: 28.8,
count: '',
free: 10
},
computed: {
count(){
console.log('计算属性触发了');
return this.a+this.b;
},
avg(){
return this.count/2;
},
sum(){
return this.price * this.count;
},
pay(){
if(this.count>0){
if(this.sum>=299){
return this.sum;
}else{
return this.sum + this.free;
}
}else{
return 0;
}
}
}
watch
属性变化,就会触发监听的函数。
监听属性变化,一般是用于跟数据无关的业务逻辑操作。
计算属性,适用于属性发生变化后,需要计算得到新的数据。
<div id="app">
a: <input type="number" v-model.number="a" /><br />
b: <input type="number" v-model.number="b" /><br />
总和:{{count}}
<br /><br /><br />
name: <input type="text" v-model="obj.name" /><br />
age: <input type="text" v-model.number="obj.age" /><br />
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
count: '',
obj: {
name: '',
age: ''
}
},
watch: {
a(newVal, oldVal){
console.log('触发了a-watch');
this.count = this.a + this.b;
},
b(newVal){
console.log('触发了b-watch');
this.count = this.a + this.b;
},
// obj(newVal, oldVal){
// console.log('触发了obj的监听');
// }
//
obj: {
//监听对象中的每一个值
handler(newVal, oldVal){
console.log('触发了obj的监听');
},
deep: true//深度监听
},
//监听对象中的某个属性
'obj.name': function(){
console.log('触发了obj.name的监听');
}
}
})
</script>
watch 也可以在methods里面进行监听配置
<div id="app">
a: <input type="number" v-model.number="a" /><br />
b: <input type="number" v-model.number="b" /><br />
总和:{{count}}
<br /><br /><br />
name: <input type="text" v-model="obj.name" /><br />
age: <input type="text" v-model.number="obj.age" /><br />
<button @click="btnAction()">开始监听</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
count: '',
obj: {
name: '',
age: ''
}
},
methods: {
btnAction(){
this.$watch('a', (newVal, oldval)=>{
console.log('监听到了a的变化');
console.log(newVal, oldval);
})
this.$watch('obj.name', (newVal, oldval)=>{
console.log('监听到了obj.name的变化');
console.log(newVal, oldval);
})
this.$watch('obj', (newVal, oldval)=>{
console.log('监听到了obj的变化');
console.log(newVal, oldval);
}, {
deep: true
})
}
}
})
// vm.$watch('a', (newVal, oldval)=>{
// console.log('监听到了a的变化');
// console.log(newVal, oldval);
// })
//
// vm.$watch('obj.name', (newVal, oldval)=>{
// console.log('监听到了obj.name的变化');
// console.log(newVal, oldval);
// })
//
// vm.$watch('obj', (newVal, oldval)=>{
// console.log('监听到了obj的变化');
// console.log(newVal, oldval);
// }, {
// deep: true
// })
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。