Vue.js 自訂濾鏡

過濾器，本質上就是一個函數。其作用在於使用者輸入資料後，它能夠進行處理，並傳回一個資料結果。

Vue.js 與AngularJS 中的過濾器語法有些相似，使用管道符（|）進行連接，程式碼範例如下：

{{'abc' | uppercase}}    'abc' => 'ABC'

這裡使用了Vue.js 內建的過濾器uppercase，將字串uppercase，將字串中的字母全部轉換成大寫形式。

Vue.js 支援在任何出現表達式的地方添加過濾器，除了上面範例中的雙大括號表達式之外，還可以在綁定指令的表達式後調用，程式碼範例如下：

<div id="app">
    <span v-text="message | uppercase"></span>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:&#39;hello world!&#39;
        }
    })
</script>

渲染為： =>  HELLO WORLD!

Vue 2.x 中，過濾器只能在mustache 綁定中使用。為了在指令綁定中實現同樣的行為，你應該使用計算屬性。

過濾器可以串聯：

{{ message | filterA | filterB }}

   

case 過濾器：把資料變成小寫形式

capitalize過濾器：把首字母變成大寫形式

// 'ABCDE' -> 'abcde' -> 'Abcde'

過濾器可以接受參數，參數跟在過濾器名稱後面，參數之間以空格分隔。程式碼範例如下：

<div id="app">
    <h1 id="ABCDE-nbsp-lowercase-nbsp-nbsp-capitalize-nbsp">{{&#39;ABCDE&#39; |lowercase | capitalize }}</h1>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:&#39;&#39;
        }
    })
</script>

   

過濾器函數將始終以表達式的值作為第一個參數，引號的參數會被當作字串處理，而不帶引號的參數會被當作資料屬性名來處理。

這裡的 message 將作為第一個參數，字串arg1 作為第二個參數，表達式 arg2 的值在計算出來以後作為第三個參數傳給過濾器。同時，Vue.js 的過濾器支援鍊式調用，上一個過濾器的輸出結果可以作為下一個過濾器的輸入

內建過濾器

1、字母操作

Vue.js 內建了capcapitalize 、uppercase、lowercase 三個過濾器用於處理英文字元。注意：這三個過濾器僅針對英文字串使用

1-1、capitalize

capitalize 過濾器用於將表達式中的首字母轉換為大寫形式

{{ message | filterA('arg1', arg2) }}

   1-2、uppercase

uppercase 過濾器用於將表達式中的所有字母轉換為大寫形式

{{'abc' | capitalize}}  // 'abc' => 'Abc'

   

ase1-3轉換成小寫形式

{{'abc' | uppercase}}  // 'abc' => 'ABC'

   

2、限制

Vue.js 中內建了limitBy、filterBy、ordery

Vue.js 中內建了一個使用過濾器、filterBy、ordery

Vue.js 中內建了一個使用過濾器、filterBy、ordery forv-order 。

注意：這三個過濾器所處理的表達式的值必須是數組，否則程式會報錯

2-1、limitBy

limitBy 過濾器的作用是限制數組為開始前的N 個元素，其中，N 由傳入的第一個參數指定，表示限制幾個，預設為0， 即取全部的元素。第二個參數可選，用來指定從哪開始，例如：第一個參數是4，第二個參數是5，則表示取4個元素，從下標為5的元素開始。程式碼範例如下：

{{'ABC' | lowercase}}  // 'ABC' => 'abc'

    

<div id="app">
    <ul>
        <!--第二个参数不指定，即取全部，从0开始-->
        <li v-for="item in items | limitBy">{{item}}</li>
    </ul>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            items:[1,2,3,4,5,6,7,8,9,10]
        }
    })
</script>

    

<div id="app">
    <ul>
        <!--只显示5个元素，从0开始-->
        <li v-for="item in items | limitBy 5">{{item}}</li>
    </ul>
</div>

   

🜎

2-2、filterBy

filterBy過濾器的使用較為靈活，其第一個參數可以是字串或函數，過濾條件是：'string || function' + in + 'optionKeyName'

如果第一個參數是字串，那麼將在每個陣列元素中搜尋它，並傳回包含該字串的元素組成的陣列。程式碼範例如下：

<div id="app">
    <ul>
        <!--显示4个，从下标为3的元素开始  注意：下标是从0开始-->
        <li v-for="item in items | limitBy 4 3">{{item}}</li>
    </ul>
</div>

   

如果陣列元素是一個對象，則過濾器會遞歸地在它所有屬性中搜尋。為了縮小搜尋範圍，可以指定一個搜尋欄位。程式碼範例如下：

<div id="app">
    <ul>
        <!--取6个，从下标为4的元素开始  注意：数组的长度是arr.length -->
        <li v-for="item in items | limitBy  items.length-4 4">{{item}}</li>
    </ul>
</div>

如果 filterBy 的第一個參數是函數，則過濾器會根據函數的回傳結果進行過濾。此時 filterBy過濾器將呼叫 Javascript 數組中內建的函數 filter() 對數組進行處理，待過濾數組中的每個元素都將作為參數輸入並執行傳入 filterBy 中的函數。

只有函數傳回結果為 true的陣列元素才符合條件並將存入一個新的數組，最終傳回結果就是這個新的陣列。

2-3、orderBy

 orderBy 過濾器的作用是傳回排序後的陣列。濾波條件是：'string || array || function' + 'order>=0 為升序 || order

第一个参数可以是字符串、数组或者函数，第二个参数order可选，决定结果为升序或降序排列，默认为1，即升序排列

若输入参数为字符串，则可同时传入多个字符串作为排序键名，字符串之间以空格分隔。代码示例如下：

<ul>
    <li v-for="user in users | orderBy &#39;lastName&#39; &#39;firstName&#39; &#39;age&#39;">
        {{user.lastName}} {{user.firstName}} {{user.age}}
    </li>
</ul>

此时，将按照传入的排序键名的先后顺序进行排序。也可以将排序键名按照顺序放入一个数组中，然后传入一个数组参数给 orderBy 过滤器即可。代码示例如下：

<!--sortKey = [&#39;lastName&#39; &#39;firstName&#39; &#39;age&#39;];-->
<ul>
    <li v-for="user in users | orderBy sortKey">
        {{user.lastName}} {{user.firstName}} {{user.age}}
    </li>
</ul>

    升序排列：

<div id="app">
    <input type="text" v-model="a">
    <ul>
        <li v-for="val in arr | orderBy 1">
            {{val}}
        </li>
    </ul>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            a:&#39;&#39;,
            arr:[&#39;pear&#39;,&#39;cherry&#39;,&#39;lemon&#39;,&#39;orange&#39;]
        }
    })
</script>

降序排列：

<div id="app">
    <input type="text" v-model="a">
    <ul>
        <li v-for="val in arr | orderBy -1">
            {{val}}
        </li>
    </ul>
</div>

   

3、json 过滤器

Vue.js 中的 json 过滤器本质上是 JSON.stringify() 的精简缩略版，可将表达式的值转换为 JSON 字符串，即输出表达式经过 JSON.stringify() 处理后的结果。

json 可接受一个类型为 Number 的参数，用于决定转换后的 JSON 字符串的缩进距离，如果不输入该参数，则默认为2。

不输入参数，默认为2的示例：

<div id="app">
    <p>{{information | json}}</p>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            information:{&#39;name&#39;:&#39;Roger&#39;, &#39;age&#39;:26}
        }
    })
</script>

为了看到效果，我们输入一个参数20：

<div id="app">
    <p>{{information | json 20}}</p> <!-- 以20个空格的缩进打印一个对象 -->
</div>

4、currency 过滤器

currency 过滤器的作用是将数字值转换为货币形式输出。

第一个参数接受类型为 String 的货币符号，如果不输入，则默认为美元符号$。

第二个参数接受类型为 Number的小数位，如果不输入，则默认为2.

注意：如果第一个参数采取默认形式，而需要第二个参数修改小数位，则第一个参数不可省略

不输入参数，默认形式

<div id="app">
    <h1 id="amount-nbsp-nbsp-currency">{{amount | currency}}</h1>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            amount: &#39;12345&#39;
        }
    })
</script>

使用其它货币符号：

<div id="app">
    <h1 id="amount-nbsp-nbsp-currency-nbsp">{{amount | currency &#39;￥&#39;}}</h1>
</div>

将小数调整为3位：

<div id="app">
    <h1 id="amount-nbsp-nbsp-currency-nbsp-nbsp">{{amount | currency &#39;￥&#39; 3}}</h1>
</div>

5、debounce 过滤器

debounce 过滤器的作用是延迟处理一定的时间执行。其接受的表达式的值必须是函数，因此，一般与 v-on 等指令结合使用。

debounce 接受一个可选的参数作为延迟时间，单位为毫秒。如果没有该参数，则默认的延迟时间为300ms，经过 debounce 包装的处理器在调用之后将至少延迟设定的时间再执行。 如果在延迟结束前再次调用，则延迟时长将重置为设定的时间。

通常，在监听用户 input 事件时使用 debounce 过滤器比较有用，可以防止频繁调用方法。debounce 的用法参考如下：

<input @keyup="onKeyup | debounce 500">

自定义过滤器

1、filter语法

在Vue.js 中也存在一个全局函数 Vue.filter 用于构造过滤器：

Vue.filter(filterName, function(input){...})

该函数接受两个参数，第一个参数为自定义的过滤器名称，第二个参数则是具体的过滤器函数，过滤器函数以值为参数，返回转换后的值

2、单个参数

注册一个名为 reverse 的过滤器，作用是将字符串反转输出。代码示例如下：

<div id="app">
    <input v-model="message">
    <span v-text="message | reverse">{{message}}</span>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.filter(&#39;reverse&#39;,function(message){
        return message.split(&#39;&#39;).reverse().join(&#39;&#39;);
    });
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:&#39;&#39;
        }
    })
</script>

注册一个名为 double 的过滤器，作用是将数字补全成两位数输出。代码示例如下

<div id="app">
    <input v-model="value">
    <p v-text="value | double">{{value}}</p>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.filter(&#39;double&#39;,function(value){
        return value<10? &#39;0&#39;+value : value
    });
    new Vue({
        el:&#39;#app&#39;,
        data:{
            value:&#39;&#39;
        }
    })
</script>

注册一个名为 date 的过滤器，作用是将当前时间毫秒数以年月日时分秒的格式输出。代码示例如下：

<div id="app">
    <p v-text="message | date">{{message}}</p>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.filter(&#39;date&#39;,function(message){
        var now = new Date(message);
        return now.getFullYear()+&#39;-&#39;
                +(now.getMonth()+1)+&#39;-&#39;
                +now.getDate()+&#39; &#39;
                +(now.getHours()<12?&#39;0&#39;+now.getHours():now.getHours())+&#39;:&#39;
                +(now.getMinutes()<10?&#39;0&#39;+now.getMinutes():now.getMinutes())+&#39;:&#39;
                +now.getSeconds();
    });
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:Date.now()
        }
    })
</script>

3、多个参数

过滤器函数除了以值作为参数外，也可以接受任意数量的参数，参数之间以空格分隔。代码示例如下：

<div id="app">
    <input v-model="message">
    <p v-text="message | wrap &#39;before&#39; &#39;end&#39;">{{message}}</p>
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.filter(&#39;wrap&#39;,function(value, begin, end){
        return begin +&#39; &#39;+ value + &#39; &#39;+ end
    });
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:&#39;&#39;
        }
    })
</script>

   

4、双向过滤器

上面的过滤器都是在 Model 数据输出到 View 层之前进行数据转化的，实际上 Vue.js 还支持把来自视图（input元素）的值在写回模型前进行转化，即双向过滤器

   
Vue.filter('filterName',{
    //model ---> view
    //read 函数可选
    read:function(val){
        ...
    },
     
    //view ---> model
    //write 函数将在数据被写入Model 之前调用
    //两个参数分别为表达式的新值和旧值
    write:function(newVal, oldVal){
        ...
    }
})

   

代码示例如下：

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message | twoWayFilter">
</div>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    Vue.filter(&#39;twoWayFilter&#39;,{
        read:function(val){
            return &#39;read&#39;+&#39; &#39;+val;
        },
        write:function(newVal, oldVal){
            return oldVal+&#39; &#39;+ &#39;write&#39;;
        }
    });
    new Vue({
        el:&#39;#app&#39;,
        data:{
            message:&#39;hello world&#39;
        }
    })
</script>

    在初始情况下，message 表达式的值经过 twoWayFilter 中的 read 函数处理，输出到 view 层

当我们在 input 框中修改 message 的值时，twoWayFilter 中的 write 函数将在数据输出到 Model 层之前处理，这里将返回 message 的旧值 + 'write'，然后输出到 Model层，因此 message的值变更为'hello world write' 并显示到页面上

常见问题解析

1、filterBy/orderBy 过滤后 $index 的索引

在使用 filterBy 或者 orderBy 对表达式进行过滤时，如果同时需要将 $index 作为参数，此时的 $index将会根据表达式数组或对象过滤后的值进行索引

<ul id="app">
    <li v-for="item in items | orderBy &#39;age&#39;">
        {{item.name}} - {{$index}}
    </li>
</ul>
 
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:&#39;#app&#39;,
        data:{
            items:[
                {name:&#39;Roger&#39;, age:26},
                {name:&#39;Sarahling&#39;, age:27},
                {name:&#39;Daisy&#39;, age:1}
            ]
        }
    })
</script>

   

2、自定义filter 的书写位置

自定义 filter 可以写在全局 Vue下，例如：

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

   

也可以写在Vue 实例当中，例如：

var vm = new Vue({
    el:'#example',
    data:{
         
    },
    filters:{
        //自定义 filter 事件的位置
        reverse:function(value){
            return value.split('').reverse().join('');
        }
    }
})

   

二者本质上并无区别，可任选一种使用。但是，采用Vue.filter 在全局定义时，需要在实例化 Vue 之前定义，否则自定义的 filter 不起作用