# Filters
###### tags: `Vue` `filters`

Filters是Vue提供一個簡易處理文字格式的方法。
e.g.轉換時間格式、大小寫、貨幣、千位加逗號...等等

### 局部註冊

直接寫在script中

**Example.vue**

<template>
  <p>{{ comment }}</p>
</template>

<script>
export default {
  data() {
    return {
      comment: 'no one cares'
    }
  },
  filters: {
    shout(comment) {
      return comment.toUpperCase()
    }
  }
}
</script>

在要格式化的文字後面加上pipes符號：｜，再寫入filter的function

<template>
    <p>{{ comment | capitalize }}</p>
</template>

### Chaining Filters
也可以串接多個filter

<script>
export default {
  data() {
    return {
      comment: 'no one cares'
    }
  },
  filters: {
    shout(comment) {
      return comment.toUpperCase()
    },
    exclaim(comment) {
      return comment + '!!!'
    }
  }
}
</script>

直接用|串連起來，注意，越左邊的越先被執行

<template>
  <p>{{ comment | shout | exclaim }}</p>
</template>

### Additional Arguments

可以傳入參數

reply中傳入name這個參數

<script>
export default {
  data() {
    return {
      comment: 'no one cares'
    }
  },
  filters: {
    shout(comment) {
      return comment.toUpperCase()
    },
    exclaim(comment) {
      return comment + '!!!'
    },
    reply(comment, name) {
      return comment + ', ' + name
    }
  }
}
</script>

在template中使用

<template>
  <p>{{ comment | reply('bro') | shout | exclaim }}</p>
</template>

### 全域註冊

通常在src中建立filters file

建立date.js

**./src/filters/date.js**

export default value => {
  const date = new Date(value)
  return date.toLocaleString(['en-US'], {
    month: 'short',
    day: '2-digit',
    year: 'numeric'
  })
}

接著去main.js註冊

import DateFilter from './filters/date'
Vue.filter('date', DateFilter)

就可以在元件或是view裡，不需import直接使用了

<span>{{ event.date | date }}</span>

---
refference:
https://vuejs.org/v2/guide/filters.html