<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<title>监视属性</title>
</head>
<body>
<!-- 监视属性watch
1当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视属性必须存在！才能进行监视
3.监视属性的两种写法
（1）在new Vue中配置传入wahch
（2）通过vm.$watch进行监视
-->
<div id="root">
<h1>今天天气{{inFo}}</h1>
<!-- 绑定事件的时候，事件 @xxx="yyy",yyy可以写一些简单的语句 -->
<!-- <button @click="isHot=!isHot">切换天气</button> -->
<button @click="chang">切换天气</button>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
isHot:true,
},
methods: {
chang(){
this.isHot=!this.isHot;
}
},
computed:{
inFo(){
return this.isHot ? '炎热' : '凉爽';
}
},
watch:{
isHot:{
// immediate:true,//初始化时让handler调用一下
//handler在isHot发生改变时触发
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
}
}
})
// vm.$watch("isHot",{
// // immediate:true,//初始化时让handler调用一下
// //handler在isHot发生改变时触发
// handler(newValue, oldValue) {
// console.log(newValue, oldValue)
// }
// })
</script>
</body>
</html>
