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

如果希望在多个vue实例间共享过滤器,则可以按照如下的格式定义全局过滤器:

    <div id="app1">
        <p>这是{{msg | toUpper}}</p>
    </div>
    <div id="app2">
        <p>这是{{msg | capi}}</p>
    </div>
    <script>
        // 在vue实例之外定义Vue.filter()全局过滤器
        Vue.filter('capi',(str)=>{
            const first=str.charAt(0).toUpperCase()
            const others=str.slice(1)
            return first+others
        })
        const vm1=new Vue({
            el:'#app1',
            data:{
                msg:'hello vue.js'
            },
            // 定义私有过滤器
            filters:{
                toUpper(msg){
                    return msg.toUpperCase()
                }
            }
        })
        const vm2=new Vue({
            el:'#app2',
            data:{
                msg:'vue.js'
            }
        })
    </script>

过滤器的注意点:

1.要定义到filters节点下,本质是一个函数。

2.在过滤器函数中一定要有一个return。

3.在过滤器形参中,就可以获取到“管道符”前面待处理的那个值

4.如果全局过滤器和私有过滤器名字一致,此时按照就近原则,调用的是“私有过滤器”

评论
头像
验证码:
相关推荐

七年之痒是什么意思

520送什么给女友

第一次见女方父母送什么好




如果未经特殊说明,本站内容皆为原创,转载内容如果侵犯了您的权益,如有侵权请联系管理员删除
联系QQ:2380712278

备案号:皖ICP备19012824号