Vue.js學習之過濾器詳解
前言
在這個教程中，我們將會通過幾個例子，了解和學習VueJs的過濾器。閱讀這這篇文中的前提是你對Vue已經有了基本的語法基礎。
Vue.Js中的過濾器基礎
過濾器是一個通過輸入數據，能夠及時對數據進行處理并返回一個數據結果的簡單函數。Vue有很多很便利的過濾器，可以參考官方文檔， http://cn.vuejs.org/api/#過濾器 ，過濾器通常會使用管道標志 “ | ”， 比如：
{{ msg | capitalize }}
// 'abc' => 'ABC'
uppercase過濾器 : 將輸入的字符串轉換成大寫字母的過濾器。
VueJs允許你鏈式調用過濾器，簡單的來說，就是一個過濾器的輸出成為下一個過濾器的輸入，然后再次過濾。接下來，我們可以想象一個比較簡單的例子，使用了Vue的 filterBy + orderBy 過濾器來過濾所有商品products。過濾出來的產品是屬于水果類商品。
filterBy過濾器 : 過濾器的值必須是一個數組，filterBy + 過濾條件。過濾條件是：'string || function'+ in 'optionKeyName'
orderBy過濾器 : 過濾器的值必須是一個數組，orderBy + 過濾條件。過濾條件是：'string || array ||function' + 'order ≥ 0 為升序 || order < 0 為降序'
接下來，我們可以看下下面這個例子：我們有一個商品數組products，我們希望遍歷這個數組，并把他們打印成一張清單，這個用v-for很容易實現(xiàn)。
<ul class="product">
<li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">
{{product.name}}-{{product.price | currency}}
</li>
</ul>
上面的例子，就是用filterBy 過濾在 'category'中含有'水果' 關鍵字的列表，返回的列表就是只含有 '水果' 關鍵字的列表，而orderBy過濾器是根據價格做了一個升序，如果想要降序，只需要加一個小于0的參數；
自定義過濾器
雖然VueJs給我們提供了很多強有力的過濾器，但有時候還是不夠。值得慶幸的，Vue給我們提供了一個干凈簡潔的方式來定義我們自己的過濾器，之后我們就可以利用管道 “ | ” 來完成過濾。
定義一個全局的自定義過濾器，需要使用Vue.filter()構造器。這個構造器需要兩個參數。
Vue.filter() Constructor Parameters:
1.filterId: 過濾器ID，用來做為你的過濾器的唯一標識；
2.filter function: 過濾器函數，用一個function來接收一個參數，之后再將接收到的參數格式化為想要的數據結果。
上面的例子中，我們要實現(xiàn)商品價格打5折該怎么做呢？其實就是實現(xiàn)的一個自定義的過濾器，表示將商品的價格打了5折；而要實現(xiàn)它，需要完成的是：
a、使用Vue.filter()構造器創(chuàng)建一個過濾器叫做discount
b、輸入商品的原價，能夠返回其打五折之后的折扣價
代碼見下面：
Vue.filter('discount', function(value) {
return value * .5;
});
var product = new Vue({
el: '.product',
data: {
products: [
{name: '蘋果',price: 25,category: "水果"},
{name: '香蕉',price: 15,category: "水果"},
{name: '雪梨',price: 65,category: "水果"},
{name: '寶馬',price: 2500,category: "汽車"},
{name: '奔馳',price: 10025,category: "汽車"},
{name: '柑橘',price: 15,category: "水果"},
{name: '奧迪',price: 25,category: "汽車"}
]
},
})
現(xiàn)在就可以像使用Vue自帶的過濾器一樣使用自定義過濾器了
<ul class="product">
<li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
{{product.name}}-{{product.price|discount | currency}}
</li>
</ul>
上面代碼實現(xiàn)的商品打5折，而如果要實現(xiàn)價格打任意折扣呢？應該在discount過濾器里增加一個折扣數值參數，改造一下我們的過濾器。
Vue.filter('discount', function(value, discount) {
return value * (discount / 100);
});
然后重新調用我們的過濾器
<ul class="product">
<li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
{{product.name}}-{{product.price|discount 25 | currency}}
</li>
</ul>
我們也可以在我們Vue實例里構造我們的過濾器，這樣構造的好處是，這樣就不會影響到其他不需要用到這個過濾器的Vue實例。
/*定義在全局
Vue.filter('discount', function(value,discount) {
return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
el: '.product',
data: {
products: [
{name: '蘋果',price: 25,category: "水果"},
{name: '香蕉',price: 15,category: "水果"},
{name: '雪梨',price: 65,category: "水果"},
{name: '寶馬',price: 2500,category: "汽車"},
{name: '奔馳',price: 10025,category: "汽車"},
{name: '柑橘',price: 15,category: "水果"},
{name: '奧迪',price: 25,category: "汽車"}
]
},
//自定義在實例
filters: {
discount: function(value, discount) {
return value * (discount / 100);
}
}
})
定義在全局就能在所有的實例中調用過濾器，如果定義在了實例里就在實例里調用過濾器。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用vue能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
基于Vue el-autocomplete 實現(xiàn)類似百度搜索框功能
本文通過代碼給大家介紹了Vue el-autocomplete 實現(xiàn)類似百度搜索框功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
Vue提供了一種稱為函數式組件的組件類型,用來定義那些沒有響應數據,也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關于Vue高級組件之函數式組件的使用場景與源碼分析的相關資料,需要的朋友可以參考下2021-11-11
vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關于Vue中引入svg圖標的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳
文件上傳在很多項目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳，感興趣的可以了解一下2022-04-04