Vue学习日记之过滤器

  过滤器是什么？相信稍微有点编程基础的人都知道，过滤器是指对某些数据或内容，经过一段处理之后再输出显示。

  同样的再Vue中也存在着过滤器。

在Vue中过滤器分为两种类型，一种为公有过滤器，另一种为私有过滤器，过滤器只能在两个地方使用，一种是插值表达式{{}}，一种是v-bind式中，使用管道符"|"与输入的数据分割。

 

1、公有过滤器

    公有过滤器指的是，它由Vue定义，可以用于任何Vue实例。

    格式：Vue.filter("filter",function(str,arguments[]){.....return newStr})

• filter是过滤器的名称
• str即回调函数的第一个参数，是需要过滤的数据名称。
• 过滤器回调函数中必须显式的返回一个值，这个值是最终呈现的值，也就是过滤好的值。
• 过滤器同样可以传入其他参数。

  使用方法，在插值表达式和v-bind中都是使用管道符与输入的数据分隔开。

  例如：

• {{msg | msgFilter}}
• v-bind:value="msg | msgFilter"

看个例子：

  <div id="app" >
      <h3>原字符串：{{msg}}</h3>
      <h3>过滤后的字符串：</h3>
      <input style="width: 500px" :value="msg| msgFormat('你','还')">
      <h3>{{msg | msgFormat('它','也')}}</h3>
  </div>
<script>
//定义了一个公有的过滤器
Vue.filter('msgFormat',function (msg,str,str1) {  
   return msg.replace(/我/g,str+str1);
   });
   Vue.filter('msgFormat1',function (msg) {
       return msg+',后天的我喝汤';
   });
   var vm=new Vue({
       el:"#app",
       data:{
           msg:"今天的我吃了饭，明天的我不吃饭"
       },
       methods:{

       }
   })
</script>

运行结果：

  我们使用Vue.filter定义了一个过滤器，data中的msg数据在经过，过滤器，之后才输出。在过滤器的回调函数中第一个参数msg为要过滤的数据，剩下的参数可加可不加，要千万记住过滤器的回调函数必须要有一个显式返回的数据，这个数据为经过过滤后的数据。

 

1.1、使用多个过滤器

 <div id="app" >
      <h3>原字符串：{{msg}}</h3>
      <h3>过滤后的字符串：</h3>
      <input style="width: 500px" :value="msg| msgFormat('你','还') | msgFormat1">
      <h3>{{msg | msgFormat('它','也') | msgFormat1}}</h3>
  </div>
 <script> 
 Vue.filter('msgFormat',function (msg,str,str1) {  //过滤器1
   return msg.replace(/我/g,str+str1);
   });
   Vue.filter('msgFormat1',function (msg) {   //过滤器2
       return msg+',后天的我喝汤';
   });
   var vm=new Vue({
       el:"#app",
       data:{
           msg:"今天的我吃了饭，明天的我不吃饭"
       },
       methods:{

       }
   })
</script>

运行结果：

使用多个过滤器特别简单，只需要使用管道符"|"分隔多个过滤器即可。

 

2、私有过滤器

  私有过滤器指的是，由Vue实例进行定义，只能应用于这个Vue实例指定的区域中。

  格式：在Vue实例中定义filters:{过滤器名称：function(str,arguments[]){.....  return newStr} }

• 同样的，str是需要过滤的值
• 需要显式的返回一个值newStr用于输出
• 可传入其他函数

 <div id="app" >
      <h3>原字符串：{{msg}}</h3>
      <h3>过滤后的字符串：</h3>
      <input style="width: 500px" :value="msg| msgFormat('你','还') | msgFormat1">
      <h3>{{msg | msgFormat('它','也') | msgFormat1}}</h3>
  </div>
<script>
var vm=new Vue({
       el:"#app",
       data:{
           msg:"今天的我吃了饭，明天的我不吃饭"
       },
       methods:{

       },
       filters:{
           msgFormat:function (msg,str,str1) {
               return msg.replace(/我/g,str+str1);
           },
           msgFormat1:function (msg) {
               return msg+',私有过滤器';
           }
       }
   })
</script>

运行结果：

私有过滤器在Vue实例中定义，创建一个filters:{}对象，在此对象中创建过滤器键值对的名称和函数，如：msgFormat:function(msg,str){....  return nerStr}。

 

2.1、使用多个过滤器

  从上述例子中可以看出，私有过滤器使用多个过滤器跟公有过滤器的=使用多个过滤器的方法是一样的，同样是使用多个管道符进行分割。

 

3、优先级

  假如我们使用了公有过滤器和私有过滤器，同时着两个过滤器的名称相同，那么是应用私有过滤器还是公有过滤器呢？

  <div id="app" >
 <h3>{{msg | msgFormat}}</h3>
  </div>
<script>
   Vue.filter("msgFormat",function (msg) {  //公有过滤器
       return msg+"，公有过滤器"
   });
   var vm=new Vue({
       el:"#app",
       data:{
           msg:"今天的我吃了饭，明天的我不吃饭"
       },
       methods:{

       },
       filters:{
         msgFormat:function (msg) {   //私有过滤器
             return msg+"，私有过滤器"
         }
       }
   })
</script>

运行结果：

在私有过滤器和公有过滤器同名时，优先使用私有过滤器。