1 <div id="app">
2 <input type="text" v-model.number="a">
3 <input type="text" v-model.number="b">
4 <button @click="handleAdd()">计算</button>
5 <p>结果为:{{sum}}</p> <!-- 执行methods中的add()方法后返回的结果 -->
6 <p>computed结果:{{count}}</p> <!-- 执行computed中的count()方法后返回的结果 -->
7 </div>
1 new Vue({
2 el:"#app",
3 data:{
4 a:"",
5 b:"",
6 sum:""
7 },
8 methods:{
9 handleAdd(){
10 this.sum = this.a+this.b; //只有点击事件触发时才会改变
11 }
12 },
13 computed:{
14 count(){
15 return this.a+this.b; //实时监听,只要data中数据发生改变返回的结果就会改变
16 }
17 }
18 })
1 <div id="app">
2 <input type="text" v-model.number="a">
3 <input type="text" v-model.number="b">
4 <p>结果:{{sum}}</p>
5 <hr>
6 <input type="text" v-model="obj.name">
7 <input type="text" v-model="obj.age">
8 </div>
1 new Vue({
2 el:"#app",
3 data:{
4 a:"",
5 b:"",
6 sum:"",
7 obj:{
8 name:"pinpinkc",
9 age:18
10 }
11 },
12 watch:{
13 a(newVal,oldVal){
14 if(newVal != oldVal){
15 this.sum = newVal+this.b;
16 }
17 console.log("a发生了改变",newVal,oldVal)
18 },
19 b(newVal,oldVal){
20 this.sum = newVal+this.a;
21 console.log("b发生了改变",newVal,oldVal)
22 },
23 obj:{
24 handler(newVal){
25 console.log("obj发生了改变",newVal)
26 },
27 deep:true
28 }
29 }
30 })