是什么？

可以理解为：在不改变原始数据的情况下，过滤一些不必要的东西，根据特定的规则或条件进项筛选，从而得到筛选之后的结果，是一种处理数据或信号的工具。

使用场景有哪些？

  • 格式化文本：将文本转化为特定的形式。例如：日期格式化，货币格式化等。
  • 搜索：在搜索前/后，使用过滤器对数组或对象进行筛选等操作。
  • 数据转换：对数据类型进行转换。例如：将字母转化为大写/小写。
  • 计算属性：根据传入的参数计算出新的结果，且不影响原始数据。
  • 显示控制：根据条件对数据进行显示/隐藏。

怎么使用？

过滤器可以用在双大括号插值和v-bind指令中，需要被添加在JavaScript表达式的尾部，由“管道”符号“|”表示。

书写格式？

<!-- 在双大括号中 -->
{{ message | myfilter }}
<!-- 在v-bind指令中 -->
<div v-bind:id="app" | formatId></div>

定义方式？

定义过滤器主要有两种方式，第一种是应用Vue.js提供的全局方法Vue.filter()进行定义；第二种是应用选项对象中的 filters 选项进行定义。

（1）应用Vue.filter()方法定义全局过滤器

格式：

​ Vue.filter(ID,function(){})

解释：

​ 第一个参数为定义的过滤器ID，作为自定义过滤器的唯一标识。第二个参数为具体的过滤器函数，以表达式的值作为作为第一个参数，再将接收到的参数格式化为想要的结果。

注意：

​ 使用全局方法Vue.filter()定义的过滤器需要定义在创建的Vue实例之前。

举个栗子：

​ 应用Vue.filter()方法定义过滤器，获取当前的时间。

相关代码解释：

​ 在 Vue 实例初始化时，这个 date 属性被设置为当前时间戳（即 new Date()），然后被传递到模板中的双大括号中进行渲染。JavaScript 的 getMonth() 方法返回的是从 0 开始的月份索引（0 表示一月，1 表示二月，以此类推），而实际的月份应该是从 1 开始的。因此 let month = time.getMonth() + 1 即可正确获取当前的月份。

<body>
    <div id="app">
        <span>{{ date | currentdate }}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
    Vue.filter('currentdate',function(time){
        let year = time.getFullYear();
        let month = addZero(time.getMonth() + 1);
        let date = addZero(time.getDate());
        let day = time.getDay();
        let hour = addZero(time.getHours());
        let minute = addZero(time.getMinutes());
        let second = addZero(time.getSeconds());
        let week = '';
        switch(day){
            case 1:
                week = "星期一";
                break;
            case 2:
                week = "星期二";
                break;
            case 3:
                week = "星期三";
                break;
            case 4:
                week = "星期四";
                break; 
            case 5:
                week = "星期五";
                break;   
            case 6:
                week = "星期六";
                break;
            case 7:
                week = "星期日";
                break;
        }
        function addZero(num) {
          return num < 10 ? "0" + num : num;
        }
        let res = "现在是 "+year+"年"+month+"月"+date+"日 "+week;
        res += hour+":"+minute+":"+second;
        return res;
    })
    const vm = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        mounted () {
            setInterval(() => {
                this.date = new Date();
            }, 1000)
        }
    })
</script>
</body>

（2）应用filters选项定义本地过滤器

应用：

​ 应用flters选项定义的过滤器包括过滤器名称和过滤器函数两部分，过滤器函数以表达式的值作为第一个参数。

格式：

1. {{message\|filtetA\|filterB}}  先调用filtetA对应的函数，然后调用filtetB对应的函数。filtetA对应的函数以message为参数，filtetB对应的函数以filtetA的结果作为参数。
2. {{message\|filterA('arg1',arg2)}}  filterA为接收多个参数的过滤器函数。参数分别是：message、arg1、arg2。

举个栗子：

wOnDERfull 转化为 Wonderful 首字母大写，其余字母小写
<div id="app">
       <span>{{ msg | lowercase| uppercase }}</span>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       const vm = new Vue({
           el: "#app",
           data: {
               msg: 'wOnDERfull'
           },
           filters: {
               lowercase: function(value){
                   return value.toLowerCase();
               },
               uppercase: function(value){
                   return value.charAt(0).toUpperCase()+value.substr(1);
               }
           }
       })
   </script>
将商品“299”格式化为“￥299.00
<div id="app">
     <span>商品价格：{{ price | formatPrice('￥') }}</span>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 <script>
     const vm = new Vue({
         el: '#app',
         data: {
             price: 299
         },
         filters: {
             formatPrice: function(value,symbol){
                 return symbol + value.toFixed(2);
             }
         }
     })
 </script>