過濾器 Vue filter

過濾器使用場景

當數據須要再次加工和處理的時候。
Vue.js 容許自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：
雙花括號插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部

雙花括號插值(使用全局定義)

HTML:

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

JS:

Vue.filter('capitalize', (value) => {
  if (!value) return ''
  // 對數據處理後 返回
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器函數總接收表達式的值 做爲第一個參數。在上述例子中，capitalize 過濾器函數將會收到 message 的值做爲第一個參數。

v-bind表達式(在組件內定義)

HTML:

<!-- 在v-bind表達式中 -->
<a v-bind:href="uri.id | getHref"></a>

JS:

let vm = new Vue({
  // ..
  filters: {
    getHref (value) => {
      return 'https://cnodejs.org/topic/' + value
    }
  }
})

相似的，getHref 過濾器函數將會收到 uri.id 的值做爲第一個參數。

過濾器的更多內容：
https://cn.vuejs.org/v2/guide...