全局过滤器

全局注册时是filter

Vue.filter('globalFilter',function(value){
	return value + "!!"
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('globalFilter')

// 需要在创建实例前定义
new Vue({
...
})

局部过滤器

组件过滤器是filters

filters: {
  capitalize(value) {
    if (!value) return ''
    return value+'abc'
  }
}

使用方法

双花括号插值：

<span>{{'ok'|capitalize}}</span>

v-bind表达式：

<div v-bind:id="id | userId"></div>

“管道”符号|左边为传入的参数，右边为过滤器名。

注意：

​ 1.当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

​ 2.一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

应用

在组件中使用过滤器：

<input v-model="filtersText" />
<div>{{ filtersText | filtersTextChange }}</div>

定义数组：

注意

vue 中的filters过滤器this指向并不是vue 中的this，而是undefined，要指向this获取vue的data数据，可以声明一个全局变量以记录当前this，如下

let vm={}  // 记录this
export default {
  data() {
    vm = this;
    return {
      arrayList: [
        {
          code: "1",
          value: "北京市",
        },
        {
          code: "2",
          value: "上海市",
        },
        ...
       ]
      }
   }
}

过滤器定义：

  filters: {
    filtersTextChange(val) {
      let arr = vm.arrayList;
      for (let item of arr) {
        if (val == item.code) {
          return item.value;
        }
      }
      return "没有这个城市";
    },
  },

运行结果：