vue---過濾器

weixin_34148340發表於2018-09-07
Vue過濾器

過濾器可用於一般常見的文字格式化

用在雙花括號差值中和v-bind表示式中

<!-- 在雙花括號中 -->
{{ 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 }}
複製程式碼

message的值將作為引數傳入到過濾器filterA中，然後再filterA中得到的結果傳入到filterB中，得到最終的過濾結果

過濾器函式

過濾器其實就是一個Js函式，所以他可以接收引數

{{ message | filterA ('arg1',arg2)}}
複製程式碼

filterA就是一個被定義為接收三個引數的過濾器函式。 第一個引數是 Message ，普通字串 'arg1'作為第二個引數，表示式 arg1的值作為 第三個引數

相關文章