Vue中自定义过滤器的学习

vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值表达式和v-bind表达式。过滤器应给被添加在Javascript表达式的尾部，由管道符指示，过滤器也分全局过滤器和私有的过滤器，所谓全局的过滤器，就是所有的vm实例都共享的，而私有过滤器是局部开始使用的过滤器

一过滤器的语法定义

 Vue.filter{'过滤器的名称',function(){}}

例如：定义一个全局的filter ，名字叫做msgFormat，效果是用疯狂代替单纯

 Vue.filter('msgFormat',function(msg,arg){
            //字符串的replace方法除了可以用字符串外，还可以使用正则表达式
            return msg.replace(/单纯/g,arg);
        });
        Vue.filter('test',function (msg){
            return msg+'========';
        })
         var vm = new Vue({
            el:'#app',
            data:{
                msg:'曾经，我也是一个单纯的少年，单纯的我傻傻的问，谁才是世上最单纯的人呢？'

            },
            methods:{

            }

        });

自定义指令引用

<p>{{msg | msgFormat('疯狂')|test}}</p>

二.私有指定的定义
私有指令定义的位置是在Vue创建的实例中，例如定义一个私有的处理时间的过滤器

filters: { //定义私有的过滤器，过滤器有两个条件： 过滤名称和处理函数
                   //过滤器在调用的时候采用的是就近原则，如果私有过滤器和全局过滤器的名称一致，这时候优先调用私有的过滤器
                     DateFormate:function(dateStr,pattern=""){
                        var dt=new Date(dateStr);
                        var y=dt.getFullYear();
                        var m=(dt.getMonth()+1).toString().padStart(2,'0');
                        var d=dt.getDate().toString().padStart(2,'0');
                        
                    
                        if(pattern.toLowerCase()=='yyyy-mm-dd')
                        return `${y}-${m}-${d}`;
                        else
                        {
                            var hh=dt.getHours().toString().padStart(2,'0');
                            var mm=dt.getMinutes().toString().padStart(2,'0');
                            var ss=dt.getSeconds().toString().padStart(2,'0');
                            return `${y}-${m}-${d} ${hh}:${mm}:${ss}------`;
                        }

                     }
                     
                 }

Vue中自定义过滤器的学习

猜你喜欢