---
# System prepended metadata

title: Filters
tags: [filters, Vue]

---

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

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


### 局部註冊

直接寫在script中

**Example.vue**

```javascript=
<template>
  <p>{{ comment }}</p>
</template>

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

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

```htmlmixed=
<template>
    <p>{{ comment | capitalize }}</p>
</template>
```
### Chaining Filters
也可以串接多個filter

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

直接用|串連起來，注意，越左邊的越先被執行
```htmlmixed=
<template>
  <p>{{ comment | shout | exclaim }}</p>
</template>
```

### Additional Arguments

可以傳入參數

reply中傳入name這個參數
```javascript=
<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中使用
```htmlmixed=
<template>
  <p>{{ comment | reply('bro') | shout | exclaim }}</p>
</template>
```


### 全域註冊

通常在src中建立filters file

建立date.js

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

接著去main.js註冊
```javascript=
import DateFilter from './filters/date'
Vue.filter('date', DateFilter)
```

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

```htmlmixed=
<span>{{ event.date | date }}</span>
```

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