這篇文章主要介紹了怎么在vue項目中實(shí)現(xiàn)一個過濾器功能，此處通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考價值，需要的朋友可以參考下：
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
過濾器
1.過濾器規(guī)則
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：
雙花括號插值{{}}和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號指示：
重慶分公司
重慶分公司
{{ name | Upper }}
過濾器分為全局過濾器和本地過濾器,全局過濾器顧名思義就是所有Vue實(shí)例掛載的元素內(nèi)都能使用，而本地過濾器則是指只有過濾器函數(shù)所在的Vue實(shí)例掛載的元素內(nèi)可以使用
全局過濾器：
Vue.filter('Upper',function (name) {
return name.toUpperCase();
});本地過濾器：
var vm=new Vue({
el: '#app',
data: {
name:'martin'
},
filters:{
Upper:function (name) {
return name.toUpperCase()
}
}
})2.串聯(lián)過濾器
{{name | filterA | filterB }}
解釋：
第一步：先把name 放到 filterA過濾器中進(jìn)行過濾
第二步：將第一步過濾器的結(jié)果再放到 filterB再進(jìn)行過濾，顯示最終過濾結(jié)果
3.過濾器也可以接收參數(shù)，因?yàn)檫^濾器說到底只是一個函數(shù)
{{ name | filterA('arg1', arg2) }}
解釋：
filterA 在這里應(yīng)該定義為接收三個參數(shù)的過濾器函數(shù)。其中 name 的值作為第一個參數(shù)，字符串 arg1 作為第二個參數(shù)，表達(dá)式 arg2 的值作為第三個參數(shù)。
最后送給大家一個實(shí)例：
源代碼：