過濾器

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?過濾器：

?

John

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

過濾器可以串聯：

{{ message | filterA | filterB }}

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

過濾器是 JavaScript 函數，因此可以接收參數：

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

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

?

from:?https://cn.vuejs.org/v2/guide/filters.html

總結

以上是生活随笔為你收集整理的Vue.js 过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。