美文网首页
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(2)

    过滤器Filter Vue可以自定义过滤器,可以在{{message}}和v-bind两处使用。 Filter的定...

  • 9.自定义vue全局过滤器

    1.Vue.filter('过滤器名字',过滤器函数):

  • 王龙

    过滤器div: {{123.456|ab}} 1全局过滤器: Vue.filter('abc'...

  • filter过滤器的使用

    应用场景:在数据渲染之前,使用filter过滤器,进行二次加工处理。注册时,Vue.filter('注册名', 处...

  • [vue]--filters 过滤器

    vue 过滤器组件:用法 官方说明:filter地址

  • Spring Boot使用过滤器Filter

    Spring Boot使用过滤器Filter >> 过滤器Filter介绍Filter也称为过滤器,是处于客户端与...

  • vue—filter 过滤器

    filter是个神奇的东西,css中有filter属性,js里也有filter属性,vue也用filter做过滤器...

  • css中filter属性

    filter是个神奇的东西,css中有filter属性,js里也有filter属性,vue也用filter做过滤器...

  • js中filter属性

    filter是个神奇的东西,css中有filter属性,js里也有filter属性,vue也用filter做过滤器...

  • 微信小程序 - wxs简单应用

    wxs 应用类似于 vue 的 filter 过滤器

网友评论

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

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