Ｖｕｅ－过滤器的使用

ｖｕｅ的过滤选择器fｉｌｔｅｒｓ与ｄａｔａ同级，使用的时候要注意以下

过滤选择器是对插值选择器里的值进行改动，并返回给插值选择器，现在用到不多

过滤器基本使用

<div id="app">
    <p>message的值是：{{message|capi}}</p>　
</div>

const vm = new Vue({
   el:'#app',
   data:{
       message:'hello world'
   } ,
   filters:{
       //注意：过滤器函数，必须定义奥filters节点之下
       //过滤器中的形参的val,永远是“管道符”前面的那个值
       capi(val){
           //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对于的字符获取出来
           const first = val.charAt(0).toUpperCase();
           //字符串的slice方法可以截取字符串，从指定索引向后截
           const other=val.slice(1)
           // console.log(first);
           //强调，过滤器中一定要有一个返回值
           return first+other;
       }
   }
})

过滤器包括私有过滤器和全局过滤器，一般采用就近原则，即当二者都存在时，起作用的是私有过滤器

１.私有过滤器的使用方法

const vm = new Vue({
    el:'#app',
    data:{
        message:'hello world'
    } ,
    //以下的过滤器是私有过滤器，当它与全局过滤器的名称一样时，私有过滤器更厉害一点
    filters:{
        //注意：过滤器函数，必须定义奥filters节点之下
        //过滤器中的形参的val,永远是“管道符”前面的那个值
        capi(val){
            //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对于的字符获取出来
            const first = val.charAt(0).toUpperCase();
            //字符串的slice方法可以截取字符串，从指定索引向后截
            const other=val.slice(1)
            // console.log(first);
            //强调，过滤器中一定要有一个返回值
            return first+other;
        }
    }
})

２.全局过滤器的使用方法

ript>
    //全局过滤器
    Vue.filter('capi',function(str){
        //Vue.filter('filterA',(msg,arg1,arg2))   第一个参数永远都是管道符前面处理的值
        //第二个参数开始，才是调用过滤器传递过来的参数
        const first = str.charAt(0).toUpperCase();
        //字符串的slice方法可以截取字符串，从指定索引向后截
        const other=str.slice(1)
        // console.log(first);
        //强调，过滤器中一定要有一个返回值
        return first+other+'-----';
    })