过滤器,计算属性,属性侦听器 - 码农知识堂

过滤器,计算属性,属性侦听器
过滤器filters

过滤器中的函数一般写在filters中

过滤器一般写法{{msg|fn(10,20)|fm}}

若msg是一个非函数数据msg将作为fn的第一个参数传入fn 10,20是第2,3个参数,fn返回的值再作为参数传给fm最后返回的值显示页面上

数据改变时,页面重新渲染，标签就会重新过滤显示
```
    "app">
    
     <p>{{timerformatter(birth)}}p>
 
     
     <p>{{birth|tool|tool2}}p>
 
     
     <p>{{birth|tool3(100,200)}}p>
 
     
     <a :href="url|tool4">百度a>
 
     
     <button @click="change1">{{a}} button>
    
```

计算属性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改变了");
                }
            }