Vue过滤器的用法和自定义过滤器使用
2017-02-08 11:46
886 查看
1、过滤器的用法,用 ‘|' 分割表达式和过滤器。
例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数。
用两个过滤器:{{msg | myfilter | myfilternumber }}
2、自定义的过滤器
过滤器的结构为:Vue.filter("id",function(value,a){});
value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。
自定义过滤器的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> </style> </head> <body> <div id="app"> <!--输出的字符串中a的个数--> <span>msg的值:{{msg}},其中a的个数:</span> {{msg | myfilter('a')}} <br> <!--输出的字符串中b的个数--> <span>msg的值:{{msg}},其中b的个数:</span> {{msg | myfilter | myfilternumber}} </div> </body> <script type="text/javascript"> 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: { } }); </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue.js学习 自定义过滤器使用(2)
- vue自定义过滤器fliter的使用
- vue.js学习 自定义过滤器使用(1)
- vue组件化挖矿之旅(三):vue-cli 自定义过滤器的使用
- vue自定义过滤器创建和使用方法详解
- angular过滤器的使用和自定义过滤器
- AngularJs学习之一使用自定义的过滤器
- 使用AngularJS创建自定义的过滤器的方法
- 使用AngularJS创建自定义的过滤器的方法
- redirect的错误用法asp.net怎么使用自定义错误
- VueJs 自定义过滤器使用总结
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- angularJS自定义过滤器使用
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- angularjs 自定义过滤器filter和用法
- AngularJS中过滤器的使用与自定义实例代码
- Vue自定义过滤器
- Log4j 1.2 使用自定义级别、自定义过滤器、动态路径
- struts2 lesson six struts2中的拦截器,过滤器,自定义拦截器,使用拦截器解决表单重复提交,常用标签的使用
- [置顶] 自定义吐司以及Toast的各种用法,详解。教你学会使用各种各样的Toast