# 格式化时间
- 全局过滤器
//main.js
Vue.filter('dataFormat', function (value, fmt) {
let getDate = new Date(value)
let o = {
'M+': getDate.getMonth() + 1,
'd+': getDate.getDate(),
'h+': getDate.getHours(),
'm+': getDate.getMinutes(),
's+': getDate.getSeconds(),
'q+': Math.floor((getDate.getMonth() + 3) / 3),
'S': getDate.getMilliseconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (let k in o) {
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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//在页面中使用
<span>{{scope.row.addTime |dataFormat('yyyy-MM-dd hh:mm:ss')}}</span> //年-月-日 时:分:秒
//或者
<span>{{scope.row.addTime |dataFormat('yyyy-MM-dd')}}</span> //年-月-日
1
2
3
4
2
3
4
- 局部过滤器
filters: {
formatTime(value) {
if (!value) {
return '';
}
const startvalue = new Date(value);
const startY = startvalue.getFullYear();
const startM = (startvalue.getMonth() + 1 < 10 ? `0${startvalue.getMonth() + 1}` : startvalue.getMonth() + 1);
const startD = (startvalue.getDate() < 10 ? `0${startvalue.getDate()}` : startvalue.getDate());
return `${startY}-${startM}-${startD}`;
},
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//在页面中使用
<span>{{addTime |formatTime}}</span>
1
2
2
# 格式化年月日
Vue.filter('replaceDate', (time) => {
if (!time) return;
if (time) {
const value = time.toString();
const d = value.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3');
return d;
}
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 格式化周
Vue.filter('replaceWeek', (time) => {
if (!time) return '';
if (time) {
const value = time.toString();
const w = `第${value}周`;
return w;
}
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 格式化年月
Vue.filter('replaceMonth', (time) => {
if (!time) return '';
if (time) {
const value = time.toString();
const m = value.replace(/^(\d{4})(\d{2})$/, '$1-$2');
return m;
}
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 设置千分位 金额
Vue.filter('formatMoney', (value) => {
if (!value) return '0.00';
/* 原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正 */
const intPart = Number(value) | 0; // 获取整数部分
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断
let floatPart = '.00'; // 预定义小数部分
const value2Array = value.toString().split('.');
//= 2表示数据有小数位
if (value2Array.length == 2) {
floatPart = value2Array[1].toString(); // 拿到小数部分
if (floatPart.length == 1) { // 补0,实际上用不着
return `${intPartFormat}.${floatPart}0`;
}
return `${intPartFormat}.${floatPart}`;
}
return intPartFormat + floatPart;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 设置千分位 数量 不保留小数
Vue.filter('formatAmount', (value) => {
if (!value) return '0';
const c = (value.toString().indexOf('.') !== -1) ? value.toLocaleString() : value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
return c;
});
1
2
3
4
5
2
3
4
5
# 小数转为百分比 保留2位小数
Vue.filter('formatNumber', (value) => {
if (!value) return '0%';
let str = Number(value * 100).toFixed(2);
str += '%';
return str;
});
1
2
3
4
5
6
2
3
4
5
6
# 小数转为百分比 不保留小数
Vue.filter('formatComplete', (value) => {
if (!value) return '0%';
// let str = parseInt(value * 100); //数值会变小
// const str = `${parseFloat((value * 100).toPrecision(12))}`;
const value = Math.round(0.57 * 100);
str += '%';
return str;
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
← watch(侦听器) 全局方法 →