# 过滤器(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)
```