技術研究
當前位置:首頁>技術研究 >文章
Vue.js之過濾器

發布日期:2020-07-16        點擊數:3478

Vue.js 允許你自定義過濾器,可被用于一些常見的文本格式化。過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部,由“管道”符號指示:

<!-- 在雙花括號中 -->{{ message | capitalize }}

<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

你可以在一個組件的選項中定義本地的過濾器:

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

或者在創建 Vue 實例之前全局定義過濾器:

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

當全局過濾器和局部過濾器重名時,會采用局部過濾器。


過濾器函數總接收表達式的值 (之前的操作鏈的結果) 作為第一個參數。在上述例子中,capitalize 過濾器函數將會收到 message 的值作為第一個參數。

過濾器可以串聯:

{{ message | filterA | filterB }}

在這個例子中,filterA 被定義為接收單個參數的過濾器函數,表達式 message 的值將作為參數傳入到函數中。然后繼續調用同樣被定義為接收單個參數的過濾器函數 filterB,將 filterA 的結果傳遞到 filterB 中。

過濾器是 JavaScript 函數,因此可以接收參數:

{{ message | filterA('arg1', arg2) }}

這里,filterA 被定義為接收三個參數的過濾器函數。其中 message 的值作為第一個參數,普通字符串 'arg1' 作為第二個參數,表達式 arg2 的值作為第三個參數。


地址:貴陽市中山西路97號騰達廣場A棟18樓
總機:0851-85831618 85831628 (傳真轉8008)
Copyright 2006-2021 www.honglinjin.com All rights reserved.
黔ICP備18003547號-1
  貴公網安備52010302000315
97精品全国免费视频