过滤器filters
过滤器中的函数一般写在filters中
过滤器一般写法{{msg|fn(10,20)|fm}}
若msg是一个非函数数据msg将作为fn的第一个参数传入fn 10,20是第2,3个参数,fn返回的值再作为参数传给fm最后返回的值显示页面上
数据改变时,页面重新渲染,标签就会重新过滤显示
<div id="app">
<!-- 直接函数处理写法 -->
<p>{{timerformatter(birth)}}</p>
<!-- birth数据传入tool过滤再显示 tool过滤的结果传给tool2再过滤-->
<p>{{birth|tool|tool2}}</p>
<!-- birth作为第一个参数 100,200第2,3个参数 -->
<p>{{birth|tool3(100,200)}}</p>
<!-- a标签 过滤器 -->
<a :href="url|tool4">百度</a>
<!-- a值被改动的时候页面刷新 标签里面的函数重新调用了一次 -->
<button @click="change1">{{a}} </button>
</div>
计算属性computed
当与computed中的函数有关联的数据发生改变时 函数就会重新计算,如果不变函数就不会重新执行。
与methods区别:如果页面重新渲染时会执行methods中的函数,这个函数会执行,但是computed不会。
可以在computed中创建一个对象x1 对象中有两个函数set,get
当其他函数执行时如果有this.x1=100等执行 就会把100传入x1中的set函数当做参数然后执行
computed: {
age() {
console.log("计算属性");
return new Date().getFullYear()-new Date(this.birth).getFullYear()
},
x1:{
get(v){
console.log(v,1111);
return new Date().getFullYear()-new Date(this.birth).getFullYear()
},
set(v){
console.log(v,11);
// this._x=v
this.birth=`${2022-v-02-03}`//birth在这里变化 get函数会重新计算
}
}
}
属性侦听器:
写法watch:{}
在watch中写入一个data中的数据 ,这个数据当做函数名写一个函数
当这个数据变化时 函数就会执行 函数的第一个参数是变化后的值,第二个参数是变化前的值
watch:{
// 侦听器属性 必须和data中的数据同名
n(arg1,arg2){//n变化了 此函数就执行 arg1变化后的值 arg2变化前的值
console.log(arg1,arg2);
if(this.n>120){
alert("超过了")
}else{
console.log("还好");
}
},
obj(){
deep:true//深度监听
console.log("obj改变了");
}
}