Vue-watch选项

Vue ----watch 选项

用于监听数据变化：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="demo">
11         <h2>Vue-watch选项</h2>
12     <div>
13         <p>室外温度：{{tem}} `C</p>
14         <p>穿衣建议: {{dress}}</p>
15         <p><button @click="add(4)" >增加</button><button @click="reduce(4)">减少</button></p>
16     </div>
17     </div>
18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
19 <script>
20     var dressList=["T恤","衬衫","羽绒服"];  //手动添加数据
21     var app=new Vue({
22         el:"#demo",
23         data: {
24             tem:16,
25             dress:"衬衫"
26         },
27         created () {
28         
29         },
30         methods: {
31             add:function(num){
32             this.tem +=num;
33             },
34             reduce:function(num){
35             this.tem -=num;
36             }
37         },
38         watch:{
39             tem:function(newValue,oldValue){
40                 if(newValue >= 20){
41                     this.dress=dressList[0]
42                 }else if(newValue < 20 && newValue > 0){
43                     this.dress =dressList[1];
44                 }else if(newValue <=0){
45                     this.dress =dressList[2];
46                 }
47             }
48         }
49     });
50 　　60 </script>
61     
62 <style lang="scss">
63 #demo {
64     
65 }
66 </style>
67       
68 </body>
69 </html>

当使用实例 watch事件

 app.$watch('tem',function(newValue,oldValue){if(newValue >= 20){this.dress=dressList[0]}else if(newValue < 20 && newValue > 0){this.dress =dressList[1];}else if(newValue <=0){this.dress =dressList[2];}})