概述

在 vue2.0 之前，是有內(nèi)置過(guò)濾器的，在2.0中已經(jīng)沒(méi)有內(nèi)置的過(guò)濾器了，但我們可以自定義過(guò)濾器。

關(guān)于 vue 過(guò)濾器，在官方文檔中是這樣說(shuō)明的：

Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開(kāi)始支持)。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示。

即過(guò)濾器是用來(lái)格式化數(shù)據(jù)的一個(gè)函數(shù)。過(guò)濾器不會(huì)修改原始數(shù)據(jù)，它的作用是過(guò)濾數(shù)據(jù)，就是對(duì)數(shù)據(jù)進(jìn)行加工處理并返回處理后的數(shù)據(jù)，比如做一些數(shù)據(jù)格式上的修改，狀態(tài)轉(zhuǎn)換等。

過(guò)濾器分為兩種

組件內(nèi)的過(guò)濾器(組件內(nèi)有效) 全局過(guò)濾器(所有組件共享)定義過(guò)濾器

第一個(gè)參數(shù)是過(guò)濾器的名字

第二個(gè)參數(shù)是過(guò)濾器的功能函數(shù) (若不定義vue就不知道這個(gè)字符串是什么，有什么作用)。

過(guò)濾器的功能函數(shù)

聲明 function(data,argv1,argv2...){} 第一個(gè)參數(shù)是傳入的要過(guò)濾的數(shù)據(jù)，即調(diào)用時(shí)管道符左邊的內(nèi)容。 第二個(gè)參數(shù)開(kāi)始往后就是調(diào)用過(guò)濾器的時(shí)候傳入的參數(shù)。過(guò)濾器的使用

先注冊(cè)，后使用

組件內(nèi) filters:{ 過(guò)濾器名: fn } fn 內(nèi)通過(guò) return 返回最終的數(shù)據(jù)

全局 Vue.filter(’過(guò)濾器名’,fn) fn 內(nèi)通過(guò) return 返回最終的數(shù)據(jù)

使用 {{ 數(shù)據(jù) | 過(guò)濾器名 }}

// 使用過(guò)濾器時(shí)需要添加管道符號(hào)（ | ）作為分隔，管道符 | 右邊是過(guò)濾器名稱(chēng)，即文本的功能函數(shù)​<!-- 在雙花括號(hào)中 -->{{ message | 過(guò)濾器名稱(chēng) }}​<!-- 在 `v-bind` 中 --><div v-bind:id='id | 過(guò)濾器名稱(chēng)'></div>自定義全局過(guò)濾器

Vue.filter(’過(guò)濾器名稱(chēng)’, function(val) { // val表示要被處理的數(shù)據(jù) // 過(guò)濾器業(yè)務(wù)邏輯，要有返回值})​<div>{{ msg | 過(guò)濾器名稱(chēng) }}</div><div v-bind='msg | 過(guò)濾器名稱(chēng)'></div>局部過(guò)濾器

data () { return {msg: ’hello world’ }},//定義私用局部過(guò)濾器。只能在當(dāng)前 vue 對(duì)象中使用filters: { dataFormat: (msg, a) => { // msg表示要過(guò)濾的數(shù)據(jù)，a表示傳入的參數(shù)return msg + a; }}​<p>{{ msg | dataFormat(’!’)}}</p> // 結(jié)果: hello world!注意事項(xiàng)

1.全局注冊(cè)時(shí)是 filter 沒(méi)有 s ， 而組件過(guò)濾器是 filters，是有 s 的，雖然寫(xiě)的時(shí)候沒(méi)有 s 也不報(bào)錯(cuò)，但是過(guò)濾器是沒(méi)有效果的。

2.當(dāng)全局過(guò)濾器和局部過(guò)濾器名字重復(fù)的時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用，即：局部過(guò)濾器優(yōu)先于全局過(guò)濾器被調(diào)用

3.一個(gè)表達(dá)式可以使用多個(gè)過(guò)濾器，其執(zhí)行順序從左往右，前一個(gè)過(guò)濾器的結(jié)果作為后一個(gè)過(guò)濾器的被處理數(shù)據(jù)，所以要注意使用順序

熟悉 vue 的童鞋會(huì)知道，過(guò)濾器有時(shí)同methods、computed、watch一樣可以達(dá)到處理數(shù)據(jù)的目的，但又不能替代它們，因?yàn)樗荒芨淖冊(cè)贾?。如果一個(gè)過(guò)濾器的內(nèi)部特別復(fù)雜，可以考慮把它寫(xiě)成一個(gè)計(jì)算屬性，因?yàn)橛?jì)算屬性本身帶有緩存，可復(fù)用性強(qiáng)，而過(guò)濾器一般用來(lái)做一些簡(jiǎn)單的操作。

在實(shí)際開(kāi)發(fā)中，全局的過(guò)濾器要比局部過(guò)濾器使用的更廣泛一些，說(shuō)白了我們?yōu)槭裁匆褂眠^(guò)濾器，其實(shí)就跟使用函數(shù)是一樣，把一些方法封裝，供其它組件使用，這樣調(diào)用起來(lái)更方便也更快捷。

大家知道全局過(guò)濾器是在 main.js 中定義的，但萬(wàn)一項(xiàng)目過(guò)大，有多個(gè)過(guò)濾器，那 main.js 就一堆代碼，為了項(xiàng)目模塊化，最好是有專(zhuān)門(mén)的目錄來(lái)統(tǒng)一存放這些過(guò)濾器，然后把處理函數(shù)給抽離出去，放在一個(gè).js文件中，下邊通過(guò)示例代碼展示。

示例一（局部過(guò)濾器）

格式化時(shí)間或日期，補(bǔ)全指定位數(shù)，不足個(gè)位數(shù)補(bǔ)0

// filter/index.js文件export default { dateFormat: value => {const dt = new Date(value * 1000) const y = dt.getFullYear()const m = (dt.getMonth() + 1 + ’’).padStart(2, ’0’) // .padStart(指定位數(shù)，'要補(bǔ)全的符號(hào)或值')const d = (dt.getDay() + ’’).padStart(2, ’0’)const hh = (dt.getHours() + ’’).padStart(2, ’0’)const mm = (dt.getMinutes() + ’’).padStart(2, ’0’)const ss = (dt.getSeconds() + ’’).padStart(2, ’0’)return `${y}-${m}-$a2uqqsmygy ${hh}:${mm}:${ss}` }}​// 在 .vue 文件中使用局部過(guò)濾器<script> import filters from ’../filter’​ export default {... ... filters: { ...filters },data() { return {}} }</script>​<div> 日期：{{ date | dateFormat }} </div>示例二（全局過(guò)濾器）

通用字典項(xiàng)的回顯：比如性別男女或通用選擇是否，后端傳給我們的數(shù)據(jù)是0、1，我們需要在頁(yè)面上顯示男女或是否

// constants/dictionary.js 文件​export const GENDER_MENU = [ { code: 0, label: ’男’}, { code: 1, label: ’女’}];​export const COMMON_MENU = [ { code: 0, label: ’否’}, { code: 1, label: ’是’}];​export default { GENDER_MENU, COMMON_MENU}

filter / dict.js 文件

// filter/dict.js 文件​import Dict from ’../constants/dictionary’​export const genderMenu = { func: value => {const target = Dict.GENDER_MENU.filter(item => { return item.code = value;})return target.length ? target[0].label : value; }}​export const commonMenu = { func: value => {const target = Dict.COMMON_MENU.filter(item => { return item.code = value;})return target.length ? target[0].label : value; }}

filter / index.js 文件

// filter/index.js 文件​import * as filters from ’./dict’ // 導(dǎo)入過(guò)濾函數(shù)​const Install = Vue => { // 導(dǎo)入的 filters 是一個(gè)對(duì)象，使用Object.keys()方法，得到一個(gè)由key組成的數(shù)組，遍歷數(shù)據(jù)，讓key作為全局過(guò)濾器的名字，后邊的是key對(duì)應(yīng)的處理函數(shù)，這樣在任何一個(gè)組件中都可以使用全局過(guò)濾器了 Object.keys(filters).forEach(key => {Vue.filter(key, filters[key].func) }) /* for(const _filter in filters) {Vue.filter(`${_filter}`, filters[_filter].func) } */}​export default Install

main.js 文件

// main.js 文件​... ...import filters from ’./../filter/index’Vue.use(filters)... ...

在.vue 文件中使用全局過(guò)濾器

// .vue 文件中使用全局過(guò)濾器​<p>性別：{{ gender | genderMenu }}</p>

以上就是如何使用vue過(guò)濾器filter的詳細(xì)內(nèi)容，更多關(guān)于vue過(guò)濾器filter的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！