VueJs 自定義過濾器使用總結
在這個教程中,我們將會通過幾個例子,瞭解和學習VueJs的過濾器。我們參考了一些比較完善的過濾器,比如orderBy 和 filterBy。而且我們可以鏈式呼叫過濾器,一個接一個過濾。因此,我們可以定義我們自己的過濾器在我們的Vue例項中。
閱讀這個教程的前提是你對Vue已經有了基本的語法基礎。
VueJs中的過濾器基礎
過濾器是一個通過輸入資料,能夠及時對資料進行處理並返回一個數據結果的簡單函式。Vue有很多很便利的過濾器,可以參考官方文件, http://cn.vuejs.org/api/#過濾器 ,過濾器通常會使用管道標誌 “ | ”, 比如:
{{ msg | uppercase }}
// 'abc' => 'ABC'
在上述的例子中,在插值的時候,使用了Vue的一個uppercase過濾器,msg可以是直接寫死,寫成{{ ‘abc’ | uppercase }},也可以利用使用者輸入來改變msg的值。
uppercase過濾器 : 將輸入的字串轉換成大寫字母的過濾器。
鏈式過濾
VueJs允許你鏈式呼叫過濾器,簡單的來說,就是一個過濾器的輸出成為下一個過濾器的輸入,然後再次過濾。接下來,我們可以想象一個比較簡答的例子,使用了Vue的 filterBy + orderBy 過濾器來過濾所有商品products。過濾出來的產品是屬於電器類商品,並且按電器字母排序。
filterBy過濾器 : 過濾器的值必須是一個數組,filterBy + 過濾條件。過濾條件是:‘string || function’ + in ‘optionKeyName’
orderBy過濾器 : 過濾器的值必須是一個數組,orderBy + 過濾條件。過濾條件是:‘string || array ||function’ + ‘order ≥ 0 為升序 || order < 0 為降序’
接下來,我們可以看下第二個例子:我們有一個商品陣列products,我們希望遍歷這個陣列,並把他們列印成一張清單,這個用v-for很容易實現。
<li v-for="product in products">
{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
capitalize過濾器 : 將輸入的字串首字母轉換成大寫字母的過濾器。currency過濾器 : 將輸入的數字轉換成現金的過濾器。可以跟上貨幣符號(預設$)和保留的小數位(預設2)。
利用上面的兩個過濾器,能夠很好的把一個json陣列的商品清單格式化成通熟易懂的商品價格清單。
如果只想要電器類商品,可以在v-for上加過濾條件:
<li v-for="product in products | filterBy 'electronics' in 'category' ">
{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
上面的例子,就是用filterBy 過濾在 'category'中含有'electronics' 關鍵字的列表,返回的列表就是隻含有 'electronics' 關鍵字的列表。
如果想要多個搜尋條件:
<li v-for="product in products | filterBy 'electronics' in 'category' 'name' ">
{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
上面的例子,就是用filterBy 過濾在 'category' 和 'name' 中含有'electronics' 關鍵字的列表。
最後我們還需要將這個列表用字母進行排序。我們可以在 filterBy 過濾器的基礎上,鏈式呼叫orderBy 過濾器。
<ul>
<li v-for="product in products
| filterBy 'electronics' in 'category'
| orderBy 'name' "
>
{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
</ul>
orderBy 的排序方式預設是升序,如果想要降序,只需要加一個小於0的引數:
<li v-for="product in products
| filterBy 'electronics' in 'category'
| orderBy 'name' -1 "
>
自定義過濾器
雖然VueJs給我們提供了很多強有力的過濾器,但有時候還是不夠。值得慶幸的,Vue給我們提供了一個乾淨簡潔的方式來定義我們自己的過濾器,之後我們就可以利用管道 “ | ” 來完成過濾。
定義一個全域性的自定義過濾器,需要使用Vue.filter()構造器。這個構造器需要兩個引數。
Vue.filter() Constructor Parameters:
1.filterId: 過濾器ID,用來做為你的過濾器的唯一標識;
2.filter function: 過濾器函式,用一個function來接收一個引數,之後再將接收到的引數格式化為想要的資料結果。
回到之前的例子:現在設想我們有一個網上商城,並給我們的所有商品打五折。
為了完成這個例子,我們需要完成的是
使用Vue.filter()構造器建立一個過濾器叫做discount
輸入商品的原價,能夠返回其打五折之後的折扣價
Vue.filter( 'discount' , function(value) {
return value * .5 ;
});
new Vue({
el : 'body',
data : {
products : [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
}
});
現在就可以像使用Vue自帶的過濾器一樣使用自定義過濾器了
<ul>
<li v-for="product in products">
{{ product.name | capitalize }} - {{ product.price | discount | currency }}
</li>
</ul>
上面的html程式碼將會輸出打了五折之後的所有商品的清單列表。
那如果我們想要的是任意折扣呢?我們應該在discount過濾器裡增加一個折扣數值引數,改造一下我們的過濾器。
Vue.filter( 'discount' , function(value,discount) {
return value * ( discount / 100 ) ;
});
然後重新呼叫我們的過濾器
<ul>
<li v-for="product in products">
{{ product.name | capitalize }} - {{ product.price | discount 25 | currency }}
</li>
</ul>
我們也可以在我們Vue例項裡構造我們的過濾器,這樣構造的好處是,這樣就不會影響到其他不需要用到這個過濾器的Vue例項。
new Vue({
el : 'body',
data : {
products : [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
},
filters: {
discount : function(value, discount){
return value * ( discount / 100 );
}
}
});
定義在全域性就能在所有的例項中呼叫過濾器,如果定義在了例項裡就在例項裡呼叫過濾器。
結束語
多虧了簡潔的管道過濾器構造器,我們不僅可以呼叫它原生的過濾器,也可以自定義屬於我們自己的過濾器。但是Vue2.0好像把它去掉了。不過我想,如果是用1.0的朋友還是很需要用到過濾器的 : )