一.watch 监听器
<p>您输入的名字是：{{ firstName}}</p> //和data中定义的属性一样直接使用
const app = new Vue({
el: "#app",
data: {
firstName: "",
},
watch: {
firstName(val) { //自行取语义化的名字
// this.firstNmae 监听当前的对象不需要使用 this 来进行调用
val.wName = "hello" + val.lastName;
},
})
深度监听 -- 和深浅拷贝一样，普通监听只能监听属性，不能监听对象
不能监听对象的原因：监听器是监听发生改变，但是监听对象只会监听对象对应在堆内存的地址有没有改变
<p>你输入的名字:{{userIfo.allName}}</p>
userIfo: {
firstName: "",
lastName: "",
allName: "",
}
watch: {
userIfo: { //自行取语义化名字
handler(val) { 固定写法
val.allName = val.firstName + val.lastName
},
deep: true //true为深度监听，false为不深度监听
}
}
二.过滤器
1.全局声明过滤器
Vue.filter("fromat", function (val) { //fromat自行取语义化名字
return val + "..."
})
2.局部声明过滤器
data：{
},
filters: {
mfromat(val) { //过滤器名字自定义，但是注意有语义化
return val + ">>>"
},
}
