美文网首页
vue filter 过滤器使用

vue filter 过滤器使用

作者: 用心为你 | 来源:发表于2020-04-17 09:57 被阅读0次

    格式化时间 自定义全局过滤器

    vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。

    一、 全局过滤器

    全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 ,否则不能被解析导致无法使用。
    过滤器表达式:过滤的内容 | 过滤器方法名
    过滤器方法中,可以设置过滤器参数,过滤的内容 | 过滤器方法名(参数1,参数2…)
    ————————————————

    <div id="app">
            <p>{{msg|msgFormat('疯狂','你','不是')}}</p>
        </div>
        <script>
            Vue.filter('msgFormat',function(msg,arg,arg2){
                return msg.replace(/单纯/g,arg).replace(/我/g,arg2)
            });
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods:{},            
            });      
        </script>
    
    image.png

    二、 局部过滤器

    局部过滤器需要在vue的示例中构建,且一个示例可有多个局部过滤器,因此使用filters,而全部过滤器只有一个,使用filter
    当全局和局部过滤器都存在时,真正作用的是局部过滤器,可以认为就近原则。

        <div id="app">
            <p>{{msg|msgFormat('疯狂','你','不是')}}</p>
        </div>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods:{},
                filters:{               
                    msgFormat:function(msg,arg,arg2){
                        return msg.replace(/单纯/g,arg).replace(/我/g,arg2);
                    }
                }
            });      
        </script>
    

    过滤时间

    相关文章

      网友评论

          本文标题:vue filter 过滤器使用

          本文链接:https://www.haomeiwen.com/subject/idasvhtx.html