一、看一个监控变化的案例
温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。
先来模拟一个温度变化的情况：我们使用按钮来加减温度。
<body> <h1>watch option</h1> <hr> <div id="app"> <p>今日温度：{{temperature}}</p> <p>穿衣建议：{{suggestion}}</p> <p><button @click="up">升高温度</button><button @click="down">降低温度</button></p> </div> <script type="text/javascript"> var suggestions = ['T恤短袖','夹克长裙','棉衣羽绒服'] var app = new Vue({ el:'#app', data: { temperature: 14, suggestion: '夹克长裙' }, methods: { up: function () { this.temperature += 5 }, down: function () { this.temperature -= 5 } }, watch: { temperature: function (newVal, oldVal) { if (newVal >= 26) { this.suggestion = suggestions[0] } else if (newVal < 26 && newVal > 0) { this.suggestion = suggestions[1] } else { this.suggestion = suggestions[2] } } } }) </script> </body>
二、用实例属性写watch监控
有些时候我们会用实例属性的形式来写watch监控。也就是把watch写在构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
app.$watch('xxx',function(){})
还是上边的案例我们改成实例方法的模式。
app.$watch('temperature',function(newVal,oldVal){ if(newVal>=26){ this.suggestion=suggestions[0]; }else if(newVal<26 && newVal >=0) { this.suggestion=suggestions[1]; }else{ this.suggestion=suggestions[2]; } })
效果和上面是一样的。
