vue时间转换的几种方式
时间：2023-02-12 10:52:55|栏目：vue|点击： 次
VUE 时间转换
做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,，前端有时候从后端拿到的时间不符合标准，此时就需要转换以后再去使用，转换有两种方式，看你个人比较喜欢哪一种。这里已时间转换为例子
过滤器filter
全局过滤器
在main.js写入
// 时间戳过滤器
Vue.filter('dateFormat', (dataStr) => {
var time = new Date(dataStr)
function timeAdd0 (str) {
if (str < 10) {
str = '0' + str
}
return str
}
var y = time.getFullYear()
var m = time.getMonth() + 1
var d = time.getDate()
var h = time.getHours()
var mm = time.getMinutes()
var s = time.getSeconds()
return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
})
此时时间戳details.createTime就会变成Vue.filter的参数dataStr进行运算
局部过滤器
在vue单文件中，有filters属性，和周期函数并列，
注意，此时是filters不是filter局部一般比全局多一个s，比如components的全局和局部的区别是一样的
created(){
},
filters:{
dateFormat:function(dataStr){
var time = new Date(dataStr)
function timeAdd0 (str) {
if (str < 10) {
str = '0' + str
}
return str
}
var y = time.getFullYear()
var m = time.getMonth() + 1
var d = time.getDate()
var h = time.getHours()
var mm = time.getMinutes()
var s = time.getSeconds()
return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
}
},
使用
使用方式全局和局部都是一样的，我们只需要在过滤的数据后面加上 | 就行
<span>发布时间：{{details.createTime|dateFormat}}</span>
JS引用转换
在utils文件中建一个js，用于时间转换
export function tempToData(unixtimestamp2) {
var unixtimestamp = new Date(unixtimestamp2)
var year = 1900 + unixtimestamp.getYear()
var month = '0' + (unixtimestamp.getMonth() + 1)
var date = '0' + unixtimestamp.getDate()
var hour = '0' + unixtimestamp.getHours()
var minute = '0' + unixtimestamp.getMinutes()
var second = '0' + unixtimestamp.getSeconds()
return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) +
' ' + hour.substring(hour.length - 2, hour.length) + ':' +
minute.substring(minute.length - 2, minute.length) + ':' +
second.substring(second.length - 2, second.length)
}
此时我们使用的时候，只要把js引用，在使用就行
全局引用
在main.js引用就行
import { tempToData } from '@/utils/DataUtils'
局部引用
在对应的vue文件中引用
import { tempToData } from '@/utils/DataUtils'
使用方式
<span>{{ mTempToData(details.createTime) }}</span>
总结
两种方式各有千秋，但是我个人比较喜欢过滤器filter的使用，在学习过程中要学会举一反三
更多关于vue时间转换的方式请查看下面的相关链接
