Vue 过滤器(filter)的使用

一、什么是过滤器？

1. 用于文本格式化（本质是一个函数）
2. 用于双括号插值和v-bind表达式，用管道符'|'添加到表达式尾部

• 双括号插值：{ { message | capitalize}}
• v-bind表达式： <div v-bind:id='rawid | formatid></div>'

二、注册过滤器

1. 注册全局过滤器
   Vue.filter('filtername',function(value){...})

<div id="demo1">
    <input type="text" v-model='message'>
    <br>
    {
   
   {message | myfile}}
</div>

<script>
    // 定义全局过滤器
    Vue.filter('myfile',function(value){
     
     
        if(!value) return ''
        value=value.toString();  //把value值转换为字符串
        return value.toUpperCase()   //转换为大写
    })
    new Vue({
     
     
        el:'#demo1',
        data:{
     
     
            message:'abc'
        }
    })
</script>

2. 注册局部过滤器
   在Vue的filters属性内注册

<div id="demo2">
    <input type="text" v-model='message'>
    <br>
    {
   
   {message | myfile}}
</div>

<script>
    // 定义局部过滤器
    new Vue({
     
     
        el:'#demo2',
        data:{
     
     
            message:'abc'
        },
        filters:{
     
     
            myfile:function(value){
     
     
                if(!value) return ''
                value=value.toString();  //把value值转换为字符串
                return value.toUpperCase()   //转换为大写
            }
        }
    })
</script>

需要注意：全局注册是filter，而组件过滤器是filters，如果不加s，并不会报错，但是没有过滤器的效果

3. 过滤器串联

• { {message | filterA | filterB}}
  message作为参数传递给filterA，filterA的返回值再作为参数传给filterB，最终的结果是filterB返回的

• { {message | filterA('arg1','arg2')}}
  一个过滤器接收多个参数（message，arg1，arg2）

• { {'a','b' | filterB}}
  a和b同时作为参数传递给fliterB

注意：

1. 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2. 一个表达式可以使用多个过滤器，过滤器之间需要用管道符“|”隔开。其执行顺序，从左往右