Vue2.0-指令与过滤器(下)

Vue2.0-指令与过滤器(下)

1.过滤器

过滤器是Vue为开发者提供的功能，常用于文本的格式化，同样他也是一个函数。过滤器可以用在两个地方:插值表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部，由 "管道符 | " 进行调用

<body>
    <div id="app">
        <p>message:{{message | capi}}</p>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                message:'zh'
            },
            //过滤器函数，必须被定义到filters节点之下
            //过滤器本质上是函数
            filters:{
                //形参里面的 val 永远都是 管道符 前面的值
                capi(val){
                    //字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
                    const frist=val.charAt(0).toUpperCase()
                    //字符串的slice 方法 可以截取字符串，从指定索引往后截取
                    const other=val.slice(1)
                    //强调:过滤器中，一定要有一个返回值
                    return frist+other
                }
            }
        })
    </script>
</body>

过滤器的注意点
1.要定义到filters节点下，本质上是一个函数
2.在过滤器函数中，一定要有return值
3.在过滤器的形参中，就可以获取到"管道符"前面待处理的哪个值
4.如果全局过滤器和私有过滤器名字一致，，此时按照"就近原则"，调用的是"私有过滤器"

1.1私有过滤器和全局过滤器

在filters节点下定义的过滤器，称为"私有过滤器"，因为他只能在当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按照下面的格式来定义全局过滤器
全局过滤器:独立于每个 vm 实例之外
**Vue.filter()**方法接收两个参数：
第一个参数:是全局过滤器的"名字"
第二个参数:是全局过滤器的"处理函数"

<body>
    <div id="app">
        <p>message:{{message | capi}}</p>
    </div>
    <div id="app1">
        <p>message:{{message | capi}}</p>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
        //使用Vue.filter()定义全局过滤器
        Vue.filter('capi',(str)=>{
            const frist=str.charAt(0).toUpperCase()
            const other=str.slice(1)
            return frist+other
        })
        const vm=new Vue({
            el:'#app',
            data:{
                message:'zh'
            },
            //过滤器函数，必须被定义到filters节点之下
            //过滤器本质上是函数
            filters:{
                //形参里面的 val 永远都是 管道符 前面的值
                capi(val){
                    //字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
                    const frist=val.charAt(0).toUpperCase()
                    //字符串的slice 方法 可以截取字符串，从指定索引往后截取
                    const other=val.slice(1)
                    //强调:过滤器中，一定要有一个返回值
                    return frist+other
                }
            }
        })
        const vm1=new Vue({
            el:'#app1',
            data:{
                message:'han'
            },
            //过滤器函数，必须被定义到filters节点之下
            //过滤器本质上是函数
            filters:{
                //形参里面的 val 永远都是 管道符 前面的值
                capi(val){
                    //字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
                    const frist=val.charAt(0).toUpperCase()
                    //字符串的slice 方法 可以截取字符串，从指定索引往后截取
                    const other=val.slice(1)
                    //强调:过滤器中，一定要有一个返回值
                    return frist+other
                }
            }
        })
    </script>
</body>

1.3过滤器传参

过滤器的本质就是JavaScript函数，因此可以接收参数
过滤器处理函数的形参列表中：
第一个参数：永远都是"管道符"前面待处理的值
从第二个参数开始，才是调用过滤器时传递过来的arg1 和 arg2 参数

<p>{{massage | filterA(arg1,arg2)}}</p>
<script>
    Vue.filter('filterA',(msg,arg1,arg2)=>{
        //过滤器的逻辑代码
    })
</script>