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

过滤器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改变了");
                }
            }