情况一：后台给的日期是Sat Jul 31 2021 21:50:01 GMT+0800 (中国标准时间)，如果直接呈现给用户，他们一定会吐槽你不说人话~~~
情况二：后台给的百分数是小数没有转化成00%格式
采用vue的过滤机制就可以解决这种情况，有两种方式：
第一种：全局写法，在main.js里面加入
// 【全局过滤】---------------------------------------- //转换情况一的日期 Vue.filter('yyyy_MM_dd', v => { if (v) return new Date(v) .toLocaleString("zh-Hans-CN", { year: "numeric", month: "2-digit", day: "2-digit", }).replace(/\//g, "-"); else return ''; }); //转换情况二的百分数 Vue.filter('percent', v => { if (v) return `${parseFloat((v * 100).toFixed(2))}%`; else return 0; });
第二种：本地写法，在vue文件页面的<script></script>里面加入
filters: { //转换情况一的日期 yyyy_MM_dd: (v) => { if (v) return new Date(v) .toLocaleString("zh-Hans-CN", { year: "numeric", month: "2-digit", day: "2-digit", }) .replace(/\//g, "-"); else return ""; }, //转换情况二的百分数 percent: (v) => { if (v) return Math.abs(v.toFixed(2)) + "%"; else return 0; }, },
然后在绑定对应数据的地方用竖线“|”跟上对应的过滤方法就可以了
{{ 日期 | yyyy_MM_dd }} {{ 小数 | percent }} /*额外知识： 过滤器还支持串联，也就是多个 | filterName | filterName | ... 这样可以综合在一起使用多个过滤功能。 过滤器是 JavaScript 函数，因此可以接收参数： {{ string | filter('参数1', 参数2) }} 这里，filter被定义为接收三个参数的过滤器函数。其中 string 的值作为第一个参数，普通字符串 '参数1' 作为第二个参数，表达式 参数2 的值作为第三个参数。 */
