【Vue核心】 14.过滤器

过滤器理解

（1）功能: 对要显示的数据进行特定格式化后再显示

（2）注意: 并没有改变原本的数据, 可是产生新的对应的数据

ps: Vue3中已废弃filter，用方法调用或计算属性替换过滤器。

定义：

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

//定义过滤器 
Vue.filter(filterName, function(value[,arg1,arg2,...]){ 
// 进行一定的数据处理 return newValue 
})

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

• 全局过滤器Vue.filter(‘过滤器名称’,function)
• 私有过滤器filters节点

①全局过滤器

<p>{{message | filter(arg1,arg2)}}</p>

//过滤器处理函数的形参列表中
// 第一个参数，永远都是"管道符“前面待处理的值
//第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1,arg2) =>{
    //过滤器的代码逻辑
}）

示例

//全局过滤器
Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})

② 私有过滤器

 <!-- 过滤器常用于文本格式化 在双括号中通过"管道符"调用capi 过滤器 -->
 <div id="app"> {{ message | capitalize }} </div>
 
 <script src="./lib/vue-2.6.12.js"></script>
 <script>
   var vm = new Vue({
      el: "#app",
      data: {
        message: "hello !!!"
     },
     // 过滤器定义在filters节点之下，过滤器本身是一个函数
     filters: {
       capitalize (val){
         return val.charAt(0).toUpperCase()+val.slice(1)
       }
     }
  })
</script>

2.使用过滤器

{{myData | filterName}}

{{myData | filterName(arg)}}

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据