vue项目实战（四）：过滤器filters

过滤器的作用：对后端返回的数据进行添油加醋，分为局部过滤器和全局过滤器。在项目中全局过滤器的使用非常的广泛。

一、局部过滤器

1-声明过滤器：filters

我们先创建如下的全局组件，给一个数据price，绑定到input上。然受在局部组件的filters中声明我们的过滤器（也就是一个函数）。

   Vue.component("App",{
     data(){
       return {
         price:0
       }
     },
     template:`
        <div>
          <input type="number" v-model="price"/>
          <h3></h3>
        </div>
     `,
     filters:{
       //1-声明过滤器
       myCurrentcy:function(value){
         return "￥"+value;
       }
     }
   });

2-使用过滤器{{数据属性|过滤器名}}

我们在该组件的模板中使用该过滤器

		//2-使用过滤器
     template:`
        <div>
          <input type="number" v-model="price"/>
          <h3>{{price|filter1}}</h3>
        </div>
     `,

3-使用效果：

二、全局过滤器

1-声明全局过滤器Vue.filter（名称，函数）

我们使用如下代码创建一个名为filter2的过滤器，接受value值并返回其反转后的值。

   Vue.filter('filter2', function(value){
     return value.split('').reverse().join('');
   });

2-使用全局过滤器

我们使用如下代码调用过滤器处理msg数据

   Vue.component("App",{
     data(){
       return {
         msg:"hello filter"
       }
     },
     template:`
        <div>
          <!--调用全局过滤器-->
          <h3>{{msg|filter2}}</h3>
        </div>
     `

3-使用效果

三、细节探讨：多参数传递的实现

对上面的全局过滤器，{{msg|filter2}}将msg作为第一个参数传递给filter2的函数的参数value，那么如果我们此时还有一个参数msg2呢？
我们使用如下参数传递msg2

{{msg|filter2(msg2)}}

在过滤器中，我们新开一个参数val2进行接收

   Vue.filter('filter2', function(value, val2){
     return val2+value.split('').reverse().join('');
   });

效果：