這篇文章主要講解了哪里使用Vue串聯(lián)過(guò)濾器，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供BGP機(jī)房服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

平時(shí)開(kāi)發(fā)中，需要用到過(guò)濾器的地方有很多，比如單位轉(zhuǎn)換、數(shù)字打點(diǎn)、文本格式化等，比如：

Vue.filter('toThousandFilter', function (value) {
 if (!value) return ''
 value = value.toString()
 return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})

實(shí)現(xiàn)效果：

30000 => 30,000

當(dāng)然這只是常規(guī)用法，沒(méi)什么好說(shuō)的。下面來(lái)說(shuō)一個(gè)我在開(kāi)發(fā)中遇到的一個(gè)需要用到串聯(lián)過(guò)濾器的使用場(chǎng)景。

假設(shè)需要獲取一個(gè)訂單列表，其中的每一項(xiàng)的 status 字段用來(lái)表示訂單狀態(tài)：        

 {
      id: '',
      order_num: '123456789',
      goodList: [ ... ],
      address: { ... },
      status: 1 // 1 待付款 2 待發(fā)貨 3 待收貨
     }

那我們拿到這個(gè)數(shù)據(jù)在，v-for 的時(shí)候，肯定會(huì)這樣做：

這樣，表示狀態(tài)的 1， 2， 3 就變成了 待付款，待發(fā)貨，待收貨。這沒(méi)有什么問(wèn)題。但是，需求來(lái)了，當(dāng)訂單未付款時(shí)，表示狀態(tài)的文字應(yīng)該為紅色。就是當(dāng)狀態(tài)為 待付款 時(shí)，文字要為紅色！這個(gè)問(wèn)題曾經(jīng)困擾了有一段時(shí)間，用了各種辦法，雖然也是實(shí)現(xiàn)了需求，但終歸不太優(yōu)雅。直到最近在翻看 vue 文檔，才想起來(lái)有串聯(lián)過(guò)濾器的用法，可以完美解決這個(gè)需求，上碼：

就這么簡(jiǎn)單。

關(guān)于過(guò)濾器，這里還有幾點(diǎn)要注意的：

• 過(guò)濾器必須是個(gè)純函數(shù)
• 過(guò)濾器中拿不到 vue 實(shí)例，這是 vue 故意這么做的
• 在全局注冊(cè)過(guò)濾器是用 Vue.filter()，局部則是 filters: {}
• 在方法中調(diào)用過(guò)濾器方法為： this.$options.filters.XXX
  

看完上述內(nèi)容，是不是對(duì)哪里使用Vue串聯(lián)過(guò)濾器有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。