有这样的一个需求, 点击切换天气后文字会在炎热或凉爽中切换
利用computed和methods
用前面文章提到的computed和methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change">切换天气</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot? '炎热' : '凉爽'
}
},
methods: {
change(){
this.isHot = !this.isHot
}
},
})
</script>
</html>监视属性watch
此时又有一个需求, 需要监视isHot属性, 当它发生改变的时候要通知
就需要用到watch
使用handler
我们可以写上两个参数, 用于接受修改后的值和之前的值,使用console.log输出
watch:{
isHot:{ //这里也可以监视computed里面的
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用? 当isHot发生改变时.
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
}
}另外一种监视方法是写在Vue实例外面
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
})总结
监视属性watch:
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在, 才能进行监视
- 监视的两种写法:
(1) new vue时传入watch配置
(2) 通过vm.$watch监视
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->
</head>
<body>
<!--
监视属性watch:
1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在, 才能进行监视
3. 监视的两种写法:
(1) new vue时传入watch配置
(2) 通过vm.$watch监视
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change">切换天气</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot? '炎热' : '凉爽'
}
},
methods: {
change(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{ //这里也可以监视computed里面的
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用? 当isHot发生改变时.
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
}
}
})
// vm.$watch('isHot',{
// handler(newValue,oldValue){
// console.log("isHot被修改了",newValue,oldValue)
// }
// })
</script>
</html>监视属性的简写
当配置项中只有handler的时候可以用简写形式
在watch中, 可以省略到handler
watch:{
//正常写法
isHot:{ //这里也可以监视computed里面的
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用? 当isHot发生改变时.
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
},
//简写
//当配置项中只有handler的时候可以用简写形式
isHot(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
}在Vue实例外的这种形式的简写
//正常写法
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
})
//简写
vm.$watch('isHot',function(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
})