前言

Vue的過(guò)濾器，了解一下？

過(guò)濾器，顧名思義，字面意思就是將一種數(shù)據(jù)經(jīng)過(guò)加工過(guò)濾成另外一種數(shù)據(jù)。

常見(jiàn)的業(yè)務(wù)場(chǎng)景就是對(duì)一些常見(jiàn)的文本格式化。

學(xué)習(xí)文檔快速入口

正文

過(guò)濾器的用處

過(guò)濾器可以用在兩個(gè)地方: 雙花括號(hào)插值 和 v-bind表達(dá)式。

<!--過(guò)濾器用于雙花括號(hào)插值-->
<p>{{ time |  formatDate }}</p>
<!--過(guò)濾器用于v-bind表達(dá)式-->
<div :id="rawId | formatId"></div>

由上面示例代碼應(yīng)該不難看出，在使用過(guò)濾器的時(shí)候，語(yǔ)法規(guī)則：需過(guò)濾的文本 加上 “管道”符號(hào)（｜） 然后加上過(guò)濾器，即 文本 ｜ 過(guò)濾器。

過(guò)濾器的定義

在Vue中常見(jiàn)的過(guò)濾器分為2種：局部過(guò)濾器和全局過(guò)濾器。

全局過(guò)濾器

全局過(guò)濾器即在創(chuàng)建Vue實(shí)例時(shí)全局定義過(guò)濾器。

示例代碼：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

局部過(guò)濾器

示例代碼：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

小結(jié)

由上面過(guò)濾器的定義不難看出，過(guò)濾器filters其實(shí)是一個(gè)默認(rèn)只有一個(gè)參數(shù)的function。如果我們想定義一個(gè)多個(gè)參數(shù)的寫(xiě)法如下：

filters: {
  formatData: function (value, arg1, arg2) {
    if (!value) return ''
    return arg1 + value + arg2
  }
}

兩種多參數(shù)過(guò)濾器的使用語(yǔ)法，效果相同，都是調(diào)用上面定義的formatData過(guò)濾器，如下:

<!-- 語(yǔ)法一 -->
<p>{{ nickname ｜ formatData('上午好，歡迎','加入Vue學(xué)習(xí)之旅') }}</p>

<!-- 語(yǔ)法二 -->
<p> {{ nickname, '上午好，歡迎', '加入Vue學(xué)習(xí)之旅'｜ formatData }} </p>

使用注意

1. 當(dāng)局部過(guò)濾器和全局過(guò)濾器重名時(shí)，局部過(guò)濾器的優(yōu)先級(jí)高，所以會(huì)采用局部過(guò)濾器；
2. 一個(gè)表達(dá)式可以使用多個(gè)過(guò)濾器。過(guò)濾器之間可以使用管道符號(hào)“｜”隔開(kāi)。它的執(zhí)行順序是從左到右。