Vue学习之 --- 过滤器的用法

过滤器的作用

1.是Vue为开发者提供的功能函数，常用于文本的格式化。可以用在2个地方：

1. 插值表达式
2. v-bind 属性绑定

过滤器应该添加在js表达式的尾部，有“管道符”进行调用。 Vue3.0版本不着重过滤器。

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

2.私有过滤器和全局过滤器

1. 在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前的vm实例所控制的el区域内使用。

 <script src="../lib/vue.js"></script>
 <div id="app">
        <p> message的值是: {{ message | Capi}}</p>
    </div>

    <div id="app2">
        <!-- 以下代码无法使用vm中的过滤器 -->
        <p> message的值是: {{ message | Capi}}</p>
    </div>

    <script>
        const Vm = new Vue({
            el:'#app',
            data:{
                message:"hello vue.js"
            },
            // 过滤器函数，必须被定义到filter节点下
            filters:{
                // 过滤器一定要返回值,形参重点的val 永远都是管道符前面的那个值
                Capi(val) {
                    const first = val.charAt(0).toUpperCase() ;//这个方法接收索引值，表示从字符串中把索引对应的字符取出来
                    const other = val.slice(1);// 可以截取字符串，从指定的索引往后截取

                    return first+other;
                }
            }
        })

        const Vm2 = new Vue({
            el:'#app2',
            data:{
                message:"hello world"
            }
        })
    </script>

2. 如果希望在多个vm实例中共享过滤器，则可以定义全局过滤器。—常用。
   格式如下：
   Vue.filter(e1,e2)方法接收2个参数
   第1个是 全局过滤器的名字，第2个是全局过滤器的处理回调函数。

    <script src="../lib/vue.js"></script>
    <div id="app">
        <p> message的值是: {{ message | Capi}}</p>
    </div>

    <div id="app2">
        <!-- 以下代码无法使用vm中的私有过滤器 ，但可以套用全局过滤器-->
        <p> message的值是: {{ message | Capi}}</p>
    </div>

    <script>
        // 定义全局过滤器
        Vue.filter('Capi',function(str){
            const first = str.charAt(0).toUpperCase() ;//这个方法接收索引值，表示从字符串中把索引对应的字符取出来
            const other = str.slice(1);// 可以截取字符串，从指定的索引往后截取

            return first+other;
        })

        const Vm = new Vue({
            el:'#app',
            data:{
                message:"hello vue.js"
            },
            // 过滤器函数，必须被定义到filter节点下
            filters:{
                // 过滤器一定要返回值,形参重点的val 永远都是管道符前面的那个值
                Capi(val) {
                    const first = val.charAt(0).toUpperCase() ;//这个方法接收索引值，表示从字符串中把索引对应的字符取出来
                    const other = val.slice(1);// 可以截取字符串，从指定的索引往后截取

                    return first+other;
                }
            }
        })

        const Vm2 = new Vue({
            el:'#app2',
            data:{
                message:"hello world"
            }
        })
    </script>

注意：如果全局过滤器和私有过滤器函数的名字一样，此时则按照就近原则，调用私有过滤器。