6.Vue过滤器

Vue过滤器：

vue过滤器使用管道 | 进行调用，如：{{name | myFilter}}，如果需要传入参数加上括号，过滤器方法上的形参比传入的参数多一个而且在第一个，其实就是输入的值，

如： {{name | myFilter(true)}}，在过滤器myFilter方法中 myFilter(value, flag),传入的true对应的是flag。

* 当全局过滤器和组件过滤器重名时，组件过滤器优先;

* 子组件调用过滤器，过滤器在全局和父组件都有同名的，全局的优先

1.组件过滤器

案例：

<template>
  <div>
      请输入：<input type="text" v-model="inputVal"/> br/>
      输入的值是：{{this.trimStr(inputVal) | myFilter(true)}}
  </div>
</template>
<script>
export default {
  data(){
      return {
        inputVal: '',
        flag: true
      }
  },
  //方法
  methods: {
      trimStr(value){
        return value.replace(' ', '');
    }
  },
  //过滤器
  filters: {
     myFilter(value, flag){
         if(!value) return '';
          //
        if(flag) {
          return value.slice(0, 4) + ' **** ' + value.slice(-4);
        }else{
            var acc = "";
            while (value > 4) {
              acc+= (value.slice(0, 4) + ' ');
              value = value.slice(4);
            }
            return acc;
        }
      }
  }
}
</script>
<style>
</style>

2.全局过滤器

全局过滤器在main.js中注册

打开 main.js 
//注册全局过滤器
Vue.filter('myFilter', function (value) {
  return  '全局注册器';
})

index.vue中使用
<template>
  <div>
        {{'调用全局过滤器' | myFilter}}
  </div>
</template>