過濾器

過濾器可以用在兩個(gè)地方:雙花括號(hào)插值v-bind 表達(dá)式
過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部,由“管道”符號(hào)指示:

{{message | capitalize}}

<div v-bind:id="rawId | formatId"></div>

capitalize 過濾器函數(shù)將會(huì)收到 message 的值作為第一個(gè)參數(shù)。

在組件選項(xiàng)中定義過濾器:

//首字母大寫
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

在創(chuàng)建Vue實(shí)例之前全局定義過濾器:

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

new Vue({
  // ...
})

過濾器可以串聯(lián):

{{ message | filterA | filterB }}

message的值將作為參數(shù)傳入filterA,然后filterA的結(jié)果會(huì)作為參數(shù)傳入filterB中

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Vue.js 允許你自定義過濾器,可被用作一些常見的文本格式化。過濾器可以用在兩個(gè)地方:mustache 插值和 ...
    猿分讓我們相遇閱讀 293評(píng)論 0 0
  • 過濾器用來格式化需要展示給用戶的數(shù)據(jù)。AngularJS有很多實(shí)用的內(nèi)置過濾器,同時(shí)也提供了方便的途徑可以自己創(chuàng)建...
    oWSQo閱讀 1,219評(píng)論 0 5
  • 在vue1.0中,我們見到過很多的內(nèi)置過濾器,如 filterBy、orderBy等等,但是在vue 2.0中,這...
    妖風(fēng)小哥哥閱讀 236評(píng)論 0 0
  • 過濾器 vuejs允許你自定義過濾器,可以用于一些常見的文本格式,過濾器可以被用在兩個(gè)地方。雙花括號(hào)插值和 v-b...
    XKolento閱讀 202評(píng)論 0 1
  • 說句實(shí)話,我并不理解什么是信仰,不過我也并不因此而有任何自卑或慚愧之心,一切的境遇都需要一個(gè)適當(dāng)?shù)臅r(shí)機(jī)吧。就像讀書...
    紅小花閱讀 642評(píng)論 0 1

友情鏈接更多精彩內(nèi)容