????????本文用一个h2来显示天气，一个button按钮来切换天气，利用监听属性来监听天气的内容，得到现在的天气和切换之前的天气。
天气显示和天气切换按钮的实现? ? ? ??
? ? ? ? 我这里把hot声明为一个布尔类型，用之前提到的计算属性（我之前的文章中有较为详细的解释）来返回炎热和凉爽两种天气，之后再对button添加事件让hot的值取反实现天气切换。
<body>
<div class="demo">
<h2>现在天气很{{info}}</h2>
<button @click="change">切换天气</button>
</div>
<script>
new Vue({
el: '.demo',
data: {
hot: true,
},
methods: {
change() {
this.hot = !this.hot;
}
},
computed: {
info() {
return this.hot ? '炎热' : '凉爽';
}
}
})
</script>
</body>监听天气的内容（监听属性）：
? ? ? ? 监听属性：
? ? ? ? ? ? ? ? 基本格式：watch: function(new,old){}
? ? ? ? ? ? ? ? 作用：实时监听data数据的改变
? ? ? ? ? ? ? ? 参数：两个，new用来返回新值，old用来返回旧值
<body>
<div class="demo">
<h2>现在天气很{{info}}</h2>
<button @click="change">切换天气</button>
</div>
<script>
new Vue({
el: '.demo',
data: {
hot: true,
},
methods: {
change() {
this.hot = !this.hot;
}
},
computed: {
info() {
return this.hot ? '炎热' : '凉爽';
}
},
watch: {
info: {
immediate: true, //初始化，让handler先调用一次
handler(a, b) {
console.log("新:" + a);
console.log("旧:" + b);
}
}
}
})
</script>
</body>按按钮前的效果：
按按钮后两次的效果?
?
?