前言

Vue的過濾器，了解一下？

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

常見的業(yè)務(wù)場景就是對一些常見的文本格式化。

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

正文

過濾器的用處

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

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

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

過濾器的定義

在Vue中常見的過濾器分為2種：局部過濾器和全局過濾器。

全局過濾器

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

示例代碼：

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

局部過濾器

示例代碼：

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

小結(jié)

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

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

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

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

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

使用注意

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