1. 程式人生 > 其它 >filter的作用和用法?

filter的作用和用法?

在Vue中filter過濾器是一個非常強大的功能。
個人覺得稱它為加工車間會更加貼切一些。
過濾器可以用來篩選出符合條件的,丟棄不符合條件的;
加工車間既可以篩選,又可以對篩選出來的進行加工。
一、filter的作用是:對值進行篩選加工。
二、使用的地方有兩個位置,和兩個方式。

{{ msg | filterA }}雙括號插值內。

<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind繫結的值的地方。
(msg為需要filter處理的值,filterA為過濾器。)
方式

{{ msg | filterA }}單個使用。

{{ msg | filterA| filterB }}多個連用。

三、過濾器的製作方法:

new Vue({
    filters:{
    //過濾器一:(使用時沒有引數,即{{msg|filterA}})
          filterA(value){
            return “¥”+value
          }
        }
    })
    //新增filters屬性,該屬性內的函式就是過濾器。其中value就是{{msg|filterA}}中的msg。
new Vue({
    filters:{
    //過濾器二:(使用時有引數,即{{ msg | filterA( arg1, arg2, arg3.... )}})
               filterA (value , ...args){//其中msg為filterA中的第一個引數value。
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        },
           filterB (value , ...args){
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        }
    })
    (使用時有引數,即{{ msg | filterA( arg1, arg2, arg3.... ) | filterB( arg1, arg2, arg3.... )}})
    此時msg為filterA的第一個引數,filterA執行完後的返回值為filterB的第一個引數,以後也是依次類推。