Vue2过滤器

Filters

于Vue3.0中已弃用，只能应用于Vue2.x

因为用methods方法也能直接处理 函数的返回值可以直接显示在页面的差值表达式上

过滤器用于文本的格式化，可以用在插值表达式和v-bind属性绑定

过滤器应该添加在js表达式尾部，由’管道符’进行调用

  <!-- 插值表达式中通过管道符调用capitalize过滤器，对message值处理 -->
  <p>{{ message | capitalize }}</p>
  <!-- v-bind中通过管道符调用formatId过滤器，对rawId值处理 -->
  <div v-bind:id="rawId | formatId"></div>

过滤器函数需要定义在Vue实例中

var app = new Vue({
  el: 'p',
  data: {
    mess:''
  },
  filters:{
	capitalize(val){
		//code
		return
	}
  }
})

过滤器本质上是函数，而且过滤器函数中的第一个形参永远都是管道符前面的值

过滤器中一定要有一个返回值，调用过滤器函数后插值表达式内容本质上就是过滤器函数的返回值

私有过滤器

定义在filters节点下的过滤器函数只能在挂载元素内部使用，其他Vue实例不用调用，因此称为私有过滤器

全局过滤器

如果需要多个Vue实例之间共享过滤器，可以定义全局过滤器

Vue.filter('capitalize', (str) => {
  return str.charAt(0).toUpperCase()+str.slice(1)
})

如果全局过滤器和私有过滤器的名字一致，此时就近原则调用私有过滤器

过滤器传参

因为过滤器也是函数因此可以接收参数

  <!-- arg1和arg2是传递给filterA的参数 -->
  <p>{{ message | filterA(arg1, arg2) }}</p>

//过滤器需要接收管道符前面的变量所以第一个参数永远是管道符前待处理的值
//第二个参数开始，才是调用过滤器传递来的arg1，arg2
Vue.filter('filterA', (msg, arg1, arg2) => {
  //code
})

串联过滤器

连续调用多个过滤器

  <!-- 把message的值交给filterA处理 -->
  <!-- 把filterA处理的结果交给filterB处理 -->
  <!-- 最终把filterB处理的结果渲染到页面上 -->
  <p>{{ message | filterA | filterB }}</p>