vue watch深度监听对象，实现数据联动

 

当对象内的某一个元素发生变化，判断对象另一元素，并进行赋值

 1 <template>
 2 
 3 　　<input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}
 4 
 5 　　<input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
 6 
 7 </template>
 8 
 9 <script>
10 
11 　　data(){
12 
13 　　　　retrun{
14 
15 　　　　　　a:{
16 
17 　　　　　　　　a1:{
18 
19 　　　　　　　　　　a12:12
20 
21 　　　　　　　　},
22 
23 　　　　　　　　a2:{
24 
25 　　　　　　　　　　a22:15
26 
27 　　　　　　　　}
28 
29 　　　　　　}
30 
31 　　},
32 
33 　　watch:{
34 
35 　　　　a:{
36 
37 　　　　　　handler(val.oldval){
38 
39 　　　　　　　　if(val.a1.a12<val.a2.a22){
40 
41 　　　　　　　　　　val.a2.a22=val.a1.a12;
42 
43 　　　　　　　　}
44 
45 　　　　　　},
46 
47 　　　　　　deep:true
48 
49 　　　　}
50 
51 　　}
52 
53 </script>

 

posted @ 2018-08-16 10:18  琪思妙想  阅读(1127)  评论(0)    收藏  举报