Vue的过滤器 filters

 Vue中的过滤器 filters

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
 1.注册过滤器：Vue.filter(name,callback) 或 new Vue({filters:{}})
 2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名称" //默认把 | 前面的参数（xxx）传到方法中
备注：
 1.过滤器也可以接受额外参数/多个过滤器也可以串联//依次执行
 2.并没有改变原本的数据，是产生新的对应数据

<div>{{time | timeFormater}}</div>  //没有穿参  展示（1621561377603我是一个字符串）

<div>{{time | timeFormater('我是第二个字符串')}}</div>  //现在这个情况就是展示  （1621561377603我是第二个字符串）

<div>{{time | timeFormater('我是第二个字符串') | myObj}}</div>  //现在这个情况就是展示  （1621561377603我是一个对象）  过滤器可以使用多个  他是依次执行的

<div>{{time | timeFormater('我是第二个字符串') | myObjTwo}}</div>  //现在这个情况就是展示  （1621561377603我是第二个对象）过滤器可以使用多个  他是依次执行的
//Vue2中设置全局过滤器
Vue.filter('myObjTwo',function(value){
　　return '我是第二个对象';
})

new Vue({
  el:'root',
  data:{
    time:1621561377603
  },
  filters:{
    timeFormater(value,str=‘我是一个字符串’){    //如果str传了参数 就用传的参数  如果没传参数就用str中设置的默认参数（str=‘我是一个字符串’）
        return value+str;  //'1621561377603我是一个字符串' || '1621561377603我是第二个字符串'
    }，

　　myObj(value,str=‘我是一个对象’){    
        return value+str;  //'1621561377603我是一个对象'
    }

} })

 

 

 

 

myFormater