一、简介

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：

双花括号插值
v-bind 表达式

过滤器要被添加在 JS 表达式尾部，由“|”符号指示：

<!-- 在双花括号中 -->
{{ message | myfun }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

其实 message | myfun 完全可以看成：myfun(message)

二、使用

1、局部组件定义过滤器

<div id="app"></div>

<script type="text/javascript">
    let App = {
      template: 
        `<div>
          <input type="text" v-model="myText"/>
          {{ myText | myfun}}
        </div>`,
      data() {
        return {
          myText: '',
        };
      },
      filters: {
        myfun: function(val) {
          return '我就不变';
        }
      }
    }

    new Vue({
      el: document.getElementById('app'),
      components: {'app': App},
      template: `<app />`,
    });
  </script>

虽然已经用v-model对input进行了双向绑定，但在input中输入任何东西，你会发现右侧的值仍为 “我就不变”
在这里插入图片描述

说明 {{ myText | myfun}}中显示的是过滤器里myfun函数的return值;

到底怎么用呢？往下看·····

(1) 一个参数

let App = {
  template: 
    `<div>
      <input type="text" v-model="myText"/>
      {{ myText | myfun}}
    </div>`,
  data() {
    return {
      myText: '',
    };
  },
  filters: {
    myfun: function(val) {
      console.log(val);
      return val.split('').reverse().join('');
    }
  }
}

在我们输入 abc 后,页面显示：
在这里插入图片描述
控制台输出：

说明我们完全可以把{{ myText | myfun}} ，看成myfun(myText),
每改变一回input的value，myfun函数就执行一次。

(2) 多个参数

let App = {
  template: 
    `<div>
      <input type="text" v-model="myText"/>
      {{ myText | myfun('hhh', '666')}}
    </div>`,
  data() {
    return {
      myText: '',
    };
  },
  filters: {
    myfun: function(val, val2, val3) {
      console.log(val);
      return val2 + val3 + ': ' + val.split('').reverse().join('');
    }
  }
}

在这里插入图片描述
说明我们完全可以把{{ myText | myfun('hhh', '666')}} ，看成myfun(myText, 'hhh', '666')

2、全局定义过滤器

如果你在各种地方都要使用一个过滤器，那就用全局定义过滤器。

使用方式和上面同理：

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: 
      `<div>
        <input type="text" v-model="myText"/>
        {{ myText | myfun('hhh', '666')}}
      </div>`,
    data() {
      return {
        myText: '',
      };
    },
  }
  
  Vue.filter('myfun', function(val, val2, val3) {
    return  val2 + val3 + ': ' + val.split('').reverse().join('');
  });

  new Vue({
    el: document.getElementById('app'),
    components: {'app': App},
    template: `<app />`,
  });
</script>

在这里插入图片描述

3、过滤器的串联

{{ message | filterA | filterB }}

在这里，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
即： {{ message | filterA | filterB }} 相当于 filterB(filterA(message))

Vue.js实例学习：过滤器