怎么在Vue中自定义使用过滤器-创新互联

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

创新互联于2013年开始,先为上街等服务建站,上街等地企业,进行企业商务咨询服务。为上街企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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中自定义使用过滤器有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联网站建设公司行业资讯频道,感谢大家的支持。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:怎么在Vue中自定义使用过滤器-创新互联
文章网址:http://myzitong.com/article/cdgdpp.html

其他资讯