# 過濾器(filters)
* 使用位置
1. 雙花括號插值中
```js
/* 在雙花括號中 */
{{ message | filter }}
```
2. v-bind表達式中
```js
/* 在v-bind中 */
<div :msg="message | filter"></div>
```
* 使用方式
1. 過濾器(filters)k可以串聯
> 過濾器 filterA接受參數message,過濾器filterB接受filterA的返回值作為參數
```js
{{ message | filterA | filterB }}
```
2. 過濾器(filters)是JavaScript函數可以接受參數
> 過濾器filterA接受三個參數,第一個參數是 message , 第二個參數是 arg1, 第三個參數是 arg2
```js
{{ message | filterA('arg1',arg2)}}
```
* 過濾器種類
* 局部過濾器
```js
<template>
<div>
<input type="text" v-model="filterCount">
<div class="filter">{{ filterCount | changeCapitalLetter }}</div>
</div>
</template>
<script>
export default{
data(){
return{
filterCount:"hello"
}
},
filters:{
changeCapitalLetter(val){
if(!val) return ''
let newArr = val.toString().split(" ").map(ele=>{
return ele.CharAt(0).toUpperCase()+ele.slice(1)
})
return newArr.join(" ")
}
}
</script>
```
* 全局過濾器
```js
filter.js
export default tool(val){
return val > 10 ? val : 0+val
}
-------------------------------
main.js
import Vue from "vue"
import { tool } from "./filter.js"
Vue.filter('tool',tool)
```