vue 過濾器基本使用

Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化，例如時間戳格式化。

過濾器可以用在：

• 雙花括號插值
• v-bind 表達式 (2.1.0+ 開始支持)。

過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ timestamp | format }}

<!-- 在 `v-bind` 中 -->
<div v-bind:time="timestamp | format"></div>

全局注冊

<!--時間戳轉換為時間-->
Vue.filter('format', function (value) { 
   const date = new Date(value)
   return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
})

組件中局部注冊

new Vue({
  el: '#app',
  data: {
      timestamp: 1548918359000,
  },
 
  filters: {
    format: function(value) {
        const date = new Date(value)
        return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    },
  },
)}

鏈式用法

過濾器可以串聯：

{{ message | filterA | filterB }}

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

需注意過濾器的先后順序。

接收參數

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

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

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