说明
vue可以通过 侦听器（watch），侦听属性，当属性值变化时，自动调用函数
注意：监听属性必须存在，才能进行侦听
侦听属性（官网叫法）有时也成为 监听属性、侦听器、监听器
应用场景
与 计算属性 功能类似，计算属性能实现的功能，侦听属性也都能实现，但一般较麻烦
表单值变化实时校验、提示错误。如：年龄、价格不能是负数，也不能超过最大值；密码复杂度不符合要求；两次密码不一致；
在数据变化时，发送 ajax请求，如：百度的输入框的提示；输入验证码，自动向服务器发请求校验是否正确；
案例
与 计算属性 的案例类似
如下图，当输入分数后，就能自动显示 优、良、中、差、不及格，该如何实现呢？
关键：没有按钮，当输入框的分数改变后，评价自动随之改变
代码
html：
<div id="app">
分数： <input type="text" v-model="score" />
<br>
评价： {{ping}}
<br>
评价： {{ping}}
<br>
评价： {{ping}}
<br>
评价： {{ping}}
</div>
js：
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
score:90,
ping:'',
},
// 侦听器
watch:{
// 侦听 score 属性，当值改变时，就调用 handler 函数
score:{
handler:function(newValue,oldValue){
console.log("newValue:",newValue)
console.log("oldValue:",oldValue)
var ret = ""
if(this.score >= 90){
ret = "优"
}else if(this.score >= 80){
ret = "良"
}else if(this.score >= 70){
ret = "中"
}else if(this.score >= 60){
ret = "差"
}else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
ret = ""
}
else{
ret = "不及格"
}
this.ping = ret
}
},
},
});
</script>
注意：监听属性必须存在，才能进行侦听
特点
- 当属性
score的值 改变时，才会触发执行score侦听器的handler()函数 - 函数名必须是
handler() - 函数有两个形参，第一个形参是 新值，第二个形参是 原值
自动执行（immediate）
上例的bug
上面例子有bug，当 score 有默认值时，不能自动执行 handler() 函数
解决
侦听器有 immediate 属性，为 true 时，表示 页面加载后自动 执行函数 handler() 函数，默认为 false
代码
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
score:90,
ping:'',
},
// 侦听器
watch:{
// 侦听 score 属性，当值改变时，就调用 handler 函数
score:{
immediate:true,//为 true时，表示初始化时就执行。默认为false
handler:function(newValue,oldValue){
console.log("newValue:",newValue)
console.log("oldValue:",oldValue)
var ret = ""
if(this.score >= 90){
ret = "优"
}else if(this.score >= 80){
ret = "良"
}else if(this.score >= 70){
ret = "中"
}else if(this.score >= 60){
ret = "差"
}else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
ret = ""
}
else{
ret = "不及格"
}
this.ping = ret
}
},
},
});
</script>
简化写法
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
score:90,
ping:'',
},
// 侦听器
watch:{
// 简化写法，侦听 score 属性，当score属性的值改变时，就调用 该函数
score:function(newValue,oldValue){
console.log("newValue:",newValue)
console.log("oldValue:",oldValue)
var ret = ""
if(this.score >= 90){
ret = "优"
}else if(this.score >= 80){
ret = "良"
}else if(this.score >= 70){
ret = "中"
}else if(this.score >= 60){
ret = "差"
}else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
ret = ""
}
else{
ret = "不及格"
}
this.ping = ret
},
},
});
</script>
校验价格
当输入价格是 负数 或 大于100 时，显示上一次的价格
代码
注意： 类型是 type="number" ，否则可以输入数字以外的字符
<div id="app">
价格：<input type="number" v-model.number="price">
</div>
js：
<script>
var app = new Vue({
el: '#app', //el是element缩写
data: { //数据
price:undefined, // 价格
},
watch:{
price:{ // 监听price属性
// handler 必须是这个名字
//newVal：修改后的值
//oldVal 修改前的值
handler:function(newVal,oldVal){
console.log("newVal:",newVal,"--oldVal:",oldVal)
console.log("newVal类型:",typeof newVal,"--oldVal类型:",typeof oldVal)
if( newVal < 0 || newVal > 100){ // 当是负数或大于100时
this.price = oldVal // 就显示上一次的值
}
}
}
}
})
</script>