VUE中常用的十大过滤器

在vue的学习过程中，我发现过滤器是一个很好用的工具，过滤器（Filters）来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch，不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。

在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

在我看来过滤器的使用，就像是一部电视剧，浙江台播放50集结束，江苏台可能播放48集结束，放到网上爱奇艺也可能变成了60集。这就是过滤器的效果，让我们对于一份数据可以随心所欲做不同的处理，同时不改变它本身，又得到我们想要的结果。

下面分享几个常用的过滤器：//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格

function trim(value, trim) {

switch (trim) {

case 1:

return value.replace(/\s+/g, "");

case 2:

return value.replace(/(^\s*)|(\s*$)/g, "");

case 3:

return value.replace(/(^\s*)/g, "");

case 4:

return value.replace(/(\s*$)/g, "");

default:

return value;

}

}

//任意格式日期处理

//使用格式：

// {{ "2018-09-14 01:05" | formaDate(yyyy-MM-dd hh:mm:ss) }}

// {{ "2018-09-14 01:05" | formaDate(yyyy-MM-dd) }}

// {{ "2018-09-14 01:05" | formaDate(MM/dd) }} 等

function formaDate(value, fmt) {

var date = new Date(value);

var o = {

"M+": date.getMonth() + 1, //月份

"d+": date.getDate(), //日

"h+": date.getHours(), //小时

"m+": date.getMinutes(), //分

"s+": date.getSeconds(), //秒

"w+": date.getDay(), //星期

"q+": Math.floor((date.getMonth() + 3) / 3), //季度

"S": date.getMilliseconds() //毫秒

};

if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));

for (var k in o) {

if(k === "w+") {

if(o[k] === 0) {

fmt = fmt.replace("w", "周日");

}else if(o[k] === 1) {

fmt = fmt.replace("w", "周一");

}else if(o[k] === 2) {

fmt = fmt.replace("w", "周二");

}else if(o[k] === 3) {

fmt = fmt.replace("w", "周三");

}else if(o[k] === 4) {

fmt = fmt.replace("w", "周四");

}else if(o[k] === 5) {

fmt = fmt.replace("w", "周五");

}else if(o[k] === 6) {

fmt = fmt.replace("w", "周六");

}

}else if (new RegExp("(" + k + ")").test(fmt)) {

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

}

}

return fmt;

}

//字母大小写切换

/*type

1:首字母大写

2：首页母小写

3：大小写转换

4：全部大写

5：全部小写

* */

function changeCase(str, type) {

function ToggleCase(str) {

var itemText = ""

str.split("").forEach(

function (item) {

if (/^([a-z]+)/.test(item)) {

itemText += item.toUpperCase();

} else if (/^([A-Z]+)/.test(item)) {

itemText += item.toLowerCase();

} else {

itemText += item;

}

});

return itemText;

}

switch (type) {

case 1:

return str.replace(/\b\w+\b/g, function (word) {

return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();

});

case 2:

return str.replace(/\b\w+\b/g, function (word) {

return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();

});

case 3:

return ToggleCase(str);

case 4:

return str.toUpperCase();

case 5:

return str.toLowerCase();

default:

return str;

}

}

//字符串循环复制,count->次数

function repeatStr(str, count) {

var text = "";

for (var i = 0; i < count; i++) {

text += str;

}

return text;

}

//字符串替换

function replaceAll(str, AFindText, ARepText) {

raRegExp = new RegExp(AFindText, "g");

return str.replace(raRegExp, ARepText);

}

//字符替换*，隐藏手机号或者身份证号等

//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)

//ecDo.replaceStr("18819322663",[3,5,3],0)

//result：188*****663

//ecDo.replaceStr("asdasdasdaa",[3,5,3],1)

//result：***asdas***

//ecDo.replaceStr("1asd88465asdwqe3",[5],0)

//result：*****8465asdwqe3

//ecDo.replaceStr("1asd88465asdwqe3",[5],1,"+")

//result："1asd88465as+++++"

function replaceStr(str, regArr, type, ARepText) {

var regtext = "",

Reg = null,

replaceText = ARepText || "*";

//repeatStr是在上面定义过的（字符串循环复制），大家注意哦

if (regArr.length === 3 && type === 0) {

regtext = "(\\w{" + regArr[0] + "})\\w{" + regArr[1] + "}(\\w{" + regArr[2] + "})"

Reg = new RegExp(regtext);

var replaceCount = this.repeatStr(replaceText, regArr[1]);

return str.replace(Reg, "$1" + replaceCount + "$2")

}

else if (regArr.length === 3 && type === 1) {

regtext = "\\w{" + regArr[0] + "}(\\w{" + regArr[1] + "})\\w{" + regArr[2] + "}"

Reg = new RegExp(regtext);

var replaceCount1 = this.repeatStr(replaceText, regArr[0]);

var replaceCount2 = this.repeatStr(replaceText, regArr[2]);

return str.replace(Reg, replaceCount1 + "$1" + replaceCount2)

}

else if (regArr.length === 1 && type === 0) {

regtext = "(^\\w{" + regArr[0] + "})"

Reg = new RegExp(regtext);

var replaceCount = this.repeatStr(replaceText, regArr[0]);

return str.replace(Reg, replaceCount)

}

else if (regArr.length === 1 && type === 1) {

regtext = "(\\w{" + regArr[0] + "}$)"

Reg = new RegExp(regtext);

var replaceCount = this.repeatStr(replaceText, regArr[0]);

return str.replace(Reg, replaceCount)

}

}

//格式化处理字符串

//ecDo.formatText("1234asda567asd890")

//result："12,34a,sda,567,asd,890"

//ecDo.formatText("1234asda567asd890",4," ")

//result："1 234a sda5 67as d890"

//ecDo.formatText("1234asda567asd890",4,"-")

//result："1-234a-sda5-67as-d890"

function formatText(str, size, delimiter) {

var _size = size || 3, _delimiter = delimiter || ",";

var regText = "\\B(?=(\\w{" + _size + "})+(?!\\w))";

var reg = new RegExp(regText, "g");

return str.replace(reg, _delimiter);

}

//现金额大写转换函数

//ecDo.upDigit(168752632)

//result："人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"

//ecDo.upDigit(1682)

//result："人民币壹仟陆佰捌拾贰元整"

//ecDo.upDigit(-1693)

//result："欠人民币壹仟陆佰玖拾叁元整"

function upDigit(n) {

var fraction = ["角", "分", "厘"];

var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];

var unit = [

["元", "万", "亿"],

["", "拾", "佰", "仟"]

];

var head = n < 0 ? "欠人民币" : "人民币";

n = Math.abs(n);

var s = "";

for (var i = 0; i < fraction.length; i++) {

s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, "");

}

s = s || "整";

n = Math.floor(n);

for (var i = 0; i < unit[0].length && n > 0; i++) {

var p = "";

for (var j = 0; j < unit[1].length && n > 0; j++) {

p = digit[n % 10] + unit[1][j] + p;

n = Math.floor(n / 10);

}

s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;

//s = p + unit[0][i] + s;

}

return head + s.replace(/(零.)*零元/, "元").replace(/(零.)+/g, "零").replace(/^整$/, "零元整");

}

//保留2位小数

function toDecimal2(x){

var f = parseFloat(x);

if (isNaN(f)) {

return false;

}

var f = Math.round(x * 100) / 100;

var s = f.toString();

var rs = s.indexOf(".");

if (rs < 0) {

rs = s.length;

s += ".";

}

while (s.length <= rs + 2) {

s += "0";

}

return s;

}

引入自定义过滤器export{

trim,

changeCase,

repeatStr,

replaceAll,

replaceStr,

checkPwd,

formatText,

upDigit,

toDecimal2,

formaDate

}

如果有其他好用的过滤器，欢迎分享