菜菜菜的 Vue 30天 - Day15

filter

今天要介紹的是 filter，filter 使用在處理文字格式的問題。

filter 的宣告方式分為 全域及區域 2 種，那下面就來介紹一下如何宣告：

宣告

1. 全域

全域的部分就是直接使用 Vue 實例來做宣告

Vue.filter('toUperCase', function (value) {
  return value.toUpperCase();
})

2. 區域

區域的部分

filters: {
  toUperCase(value) {
    return value.toUpperCase();
  }
}

使用

至於使用方式呢也分成 2 種， 使用 {{}}及v-bind 2 種。

下面一樣直接來介紹一下如何使用：

1. {{ }}

{{ message | toUperCase }}

2. v-bind

<div v-bind:id="rawId | formatId"></div>

另外 filter 也能夠帶參數進去做使用。

{{ message | toUperCase(arg) }}

其實 filter 在使用上跟 computed 很類似，但 filter 是使用在文字格式的部分，computed 較適合使用在較複雜的運算上(雖然我真的很少很少使用 filter)。

明天繼續介紹其他內容囉～