cssjs写在一起vue_vue.js核心知识点：6.1十个常用的自定义过滤器，必须会用会写！...

文件结构&＃xff1a;

.├── src│ ├── filter│ │ ├── filter.js│ │ │ └── main.js└── ...

过滤器们放在filter文件夹下

filter/filter.js&＃xff1a;

这个文件主要是写了过滤器实现的方法&＃xff0c;然后export进行导出。

function filterOne(n){ return n &＃43; 10;}function filterTwo(n){ return n &＃43; 5;}export{ filterOne, filterTwo}

main.js&＃xff1a;

// 找 filter/filter.jsimport * as filters from &＃39;./filter/filter.js&＃39;//遍历所有导出的过滤器并添加到全局过滤器Object.keys(filters).forEach((key) &＃61;> { Vue.filter(key, filters[key]);})

在 .vue 组件下使用

{{ test | filterOne }}问题二&＃xff1a;vue-cli工作中常用的过滤器

在 .vue 组件中的使用示例&＃xff1a;

{{ string | trim(1) }} // 去除所有空格&＃xff0c;过滤器第一个参数为value

常用的过滤器&＃xff0c;filter/filter.js

// 去除空格function trim(value, trim) { switch (trim) { case 1: return value.replace(/s&＃43;/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; }}//任意格式日期处理//使用格式&＃xff1a;// {{ &＃39;2018-09-14 01:05&＃39; | formaDate(yyyy-MM-dd hh:mm:ss) }} // {{ &＃39;2018-09-14 01:05&＃39; | formaDate(yyyy-MM-dd) }} // {{ &＃39;2018-09-14 01:05&＃39; | formaDate(MM/dd) }} 等function formaDate(value, fmt) { var date &＃61; new Date(value); var o &＃61; { "M&＃43;": date.getMonth() &＃43; 1, //月份 "d&＃43;": date.getDate(), //日 "h&＃43;": date.getHours(), //小时 "m&＃43;": date.getMinutes(), //分 "s&＃43;": date.getSeconds(), //秒 "w&＃43;": date.getDay(), //星期 "q&＃43;": Math.floor((date.getMonth() &＃43; 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; if (/(y&＃43;)/.test(fmt)) fmt &＃61; fmt.replace(RegExp.$1, (date.getFullYear() &＃43; "").substr(4 - RegExp.$1.length)); for (var k in o) { if(k &＃61;&＃61;&＃61; &＃39;w&＃43;&＃39;) { if(o[k] &＃61;&＃61;&＃61; 0) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周日&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 1) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周一&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 2) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周二&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 3) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周三&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 4) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周四&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 5) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周五&＃39;); }else if(o[k] &＃61;&＃61;&＃61; 6) { fmt &＃61; fmt.replace(&＃39;w&＃39;, &＃39;周六&＃39;); } }else if (new RegExp("(" &＃43; k &＃43; ")").test(fmt)) { fmt &＃61; fmt.replace(RegExp.$1, (RegExp.$1.length &＃61;&＃61; 1) ? (o[k]) : (("00" &＃43; o[k]).substr(("" &＃43; o[k]).length))); } } return fmt; }//字母大小写切换/*type 1:首字母大写 2&＃xff1a;首页母小写 3&＃xff1a;大小写转换 4&＃xff1a;全部大写 5&＃xff1a;全部小写 * */function changeCase(str, type) { function ToggleCase(str) { var itemText &＃61; "" str.split("").forEach( function (item) { if (/^([a-z]&＃43;)/.test(item)) { itemText &＃43;&＃61; item.toUpperCase(); } else if (/^([A-Z]&＃43;)/.test(item)) { itemText &＃43;&＃61; item.toLowerCase(); } else { itemText &＃43;&＃61; item; } }); return itemText; }switch (type) { case 1: return str.replace(/bw&＃43;b/g, function (word) { return word.substring(0, 1).toUpperCase() &＃43; word.substring(1).toLowerCase(); }); case 2: return str.replace(/bw&＃43;b/g, function (word) { return word.substring(0, 1).toLowerCase() &＃43; 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 &＃61; &＃39;&＃39;; for (var i &＃61; 0; i 0; i&＃43;&＃43;) { var p &＃61; &＃39;&＃39;; for (var j &＃61; 0; j 0; j&＃43;&＃43;) { p &＃61; digit[n % 10] &＃43; unit[1][j] &＃43; p; n &＃61; Math.floor(n / 10); } s &＃61; p.replace(/(零.)*零$/, &＃39;&＃39;).replace(/^$/, &＃39;零&＃39;) &＃43; unit[0][i] &＃43; s; //s &＃61; p &＃43; unit[0][i] &＃43; s; } return head &＃43; s.replace(/(零.)*零元/, &＃39;元&＃39;).replace(/(零.)&＃43;/g, &＃39;零&＃39;).replace(/^整$/, &＃39;零元整&＃39;);} //保留2位小数function toDecimal2(x){ var f &＃61; parseFloat(x); if (isNaN(f)) { return false; } var f &＃61; Math.round(x * 100) / 100; var s &＃61; f.toString(); var rs &＃61; s.indexOf(&＃39;.&＃39;); if (rs <0) { rs &＃61; s.length; s &＃43;&＃61; &＃39;.&＃39;; } while (s.length <&＃61; rs &＃43; 2) { s &＃43;&＃61; &＃39;0&＃39;; } return s;}export{trim, changeCase, repeatStr, replaceAll, replaceStr, checkPwd, formatText, upDigit, toDecimal2, formaDate}

编辑器效果&＃xff1a;