Vue中如何对时间进行格式化处理
Danica 1/10/2022 Vue
# vue2
参考资料：
# 步骤
- 原始时间数据为
addtime,在数据addtime后面添加管道符|和全局过滤器dateFormat
{{ addtime | dateFormat }}
1
- 在
main.js入口文件中定义全局过滤器dateFormat
Vue.filter('dataFormat',(dtStr)=>{
//返回一个日期对象
const dt = new Date(dtStr)
const y = dt.getFullYear()
const m = padZero(dt.getMonth() + 1)
const d = padZero(dt.getDate())
const hh = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 声明补零函数，为不足两位数的时间数据补零
function padZero(n){
n > 9 ? n : '0' + n
}
1
2
3
2
3
# vue3
# 步骤
- 在
assets/js/中声明一个FormatDate的函数，并导出
// 用于格式化时间
function formatDate(value, format) {
//value: 需要格式化的数据
//format: 指定格式 yyyy-MM-dd hh:mm:ss
let date = new Date(value);
// 获取年份
let year = date.getFullYear();
if (/(y+)/.test(format)) {
// 获取匹配组的内容
let content = RegExp.$1;
format = format.replace(content, year.toString().slice(4 - content.length));
}
let o = {
// y: date.getFullYear(), // 用这一句也行，但只适用于四位数显示时候用
M: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds()
};
for (let key in o) {
// 构造动态正则
let reg = new RegExp(`(${key}+)`);
if (reg.test(format)) {
// 获取匹配组的内容
let content = RegExp.$1;
let k = o[key] >= 10 ? o[key] : content.length == 2 ? '0' + o[key] : o[key];
format = format.replace(content, k);
}
}
return format;
}
export default formatDate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
- 在使用组件页面中导入此js模块
import formatDate from '@/assets/js/FormatDate' - 在使用组件的
computed节点中调用此函数
computed:{
formatDate(){
return formatDate
}
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 在需要渲染处使用计算属性
{{ formatDate(scope.row.addtime, "yyyy-mm-dd hh:MM:ss") }}
1
2
2