过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！

局部过滤器：

过滤器可以用在两个地方：双花括号插值或 v-bind表达式。

eg：先来看看第一个小例子：

<div id="app">
    <p>电脑价格：{{price | addPriceIcon}}</p>
</div>
 
<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        addPriceIcon(value){
            console.log(value)//200
            return '¥' + value
        }
    }
 })
</script>

上边代码，我的需求是想把价格前面加上人民币符号（¥），模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数，处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。可能有人会问：你手动加上去不就得了！如果页面有上千个价格需要添加，怎么办？几十个页面需要添加怎么办呢，手动加能累晕！所以这种通用机制很重要。

在看一个类似官方文档的例子：（把输入的英文首字母大写，如果连续输入，以空格隔开）

<div id="app">
    //输入框
    <input type="text" v-model="content" @change="changeEvent">
     //显示层，后边加一个过滤器处理函数，把英文首字母变为大写
    <h3>{{viewContent | changeCapitalLetter}}</h3>
</div>
 
<script>
 let vm = new Vue({
    el:"#app",
    data:{
        viewContent:"",
        content:""    
    },
    methods:{
        changeEvent(){
            this.viewContent = this.content;
        }
    },
    filters:{
        changeCapitalLetter(value){//value是输入框的内容，也是要显示的内容
            if(value){
                let str = value.toString();
                //获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母
                let newArr = str.split(" ").map(ele=>{
                   return ele.charAt(0).toUpperCase() + ele.slice(1)
                });
                return newArr.join(" ")  //数组转字符串 以空格输出。。。
            }
        }
    }
 })
</script>

全局过滤器：（！！！！重点！！！！）

全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } )

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
 
    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"卷王" 
        }
    })
</script>

上边代码，全局过滤器，

参数一：是过滤器的名字，也就是管道符后边的处理函数；

参数二：处理函数，处理函数的参数同上。。。

vue 过滤器filter

局部过滤器：

全局过滤器：（！！！！重点！！！！）