Vue过滤器的用法和自定义过滤器使用

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。