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)
})

為了便於維護，可以將過濾器單獨提煉到一個檔案中進行管理，新建一個filters.js：

const capitalize1st = value => value.charAt(0).slice(0, 1).toUpperCase() + value.slice(1);

export default {
  capitalize1st
}
 

在main.js中引入：

import filters from '@/components/helper/filters'

// 註冊全域性過濾器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
});

參考

• Vue - 過濾器
• 伯樂線上 - Vue使用中的小技巧