资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在Vue中自定义使用过滤器

今天就跟大家聊聊有关怎么在Vue中自定义使用过滤器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了寿阳免费建站欢迎大家使用!

1、过滤器的用法,用  ‘|' 分割表达式和过滤器。

例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数。

用两个过滤器:{{msg | myfilter | myfilternumber }}

2、自定义的过滤器

过滤器的结构为:Vue.filter("id",function(value,a){});

value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。

自定义过滤器的例子:





  
  
  
  



  
    
    msg的值:{{msg}},其中a的个数: {{msg | myfilter('a')}}
    
         msg的值:{{msg}},其中b的个数: {{msg | myfilter | myfilternumber}}   
  Vue.filter("myfilter", function(value, arg) {     //返回一个对象或者json字符串,列出字符串中的字符以及字符的个数,不区分大小写     var obj = {};     var s = value.split('').sort().join("");     var reg = /(.)\1+/ig;     var str = s.replace(reg, "$1"); //字符串去重后的结果     var i = 0,       n,       a;     while (s.length > 0) {       a = str.charAt(i);       n = s.lastIndexOf(a) + 1;       obj[a] = n;       s = s.substring(n);       i++;     }     return arg ? obj[arg] : obj;   });   Vue.filter("myfilternumber", function(value) {     return value.b;   });   var app1 = new Vue({     el: "#app",     data: {       msg: "a1a1aba2babac"     },     methods: {     }   });

看完上述内容,你们对怎么在Vue中自定义使用过滤器有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


当前标题:怎么在Vue中自定义使用过滤器
文章出自:http://cdkjz.cn/article/ppoehi.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220