computed 计算属性监听多个(数据)
<body>
<div id="app">
<p>
<input type="text" name="" id="" v-model="num1" />
+
<input type="text" name="" id="" v-model="num2" />
=
<span>{{total}}</span>
</p>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
num1: "",
num2: "",
sum: "",
},
computed: {
// computed监听对象中多个数据的变化
total() {
this.sum = Number(this.num1) + Number(this.num2);
return this.sum;
},
},
methods: {},
});
</script>
</body>
输入一个内容时,也完成了监听:
当我们在文本框中输入内容时,计算属性就已经完成了对两个数据的计算
watch 监听单个(数据)
注意:watch 监听的数据,一定是在 data 中是存在的!!
在data数据中心的num,当我们通过点击事件让它发生变化时,通过watch监听属性监听它的变化
<div id="app">
<p>{{num}}</p>
<button @click="num++">点击加一</button>
</div>
let vm = new Vue({
el:'#app',
data:{
num:0
},
watch:{
// 当前值(已经改变的值)newval 旧值 oldval
num:function(newval,oldval){
console.log("新值是:"+newval);
console.log("旧值是:"+oldval);
}
}
})
当我们点击按钮时,查看控制台: