今天做vue项目中,需要将时间戳转换成普通日期的格式,于是想到两种方式去实现,记录在此,方便日后有需要时,直接复制粘贴
方法一:
1、运行 npm install moment --save 或者 yarn add moment 安装 moment 插件
2、在 main.js 文件中引入 moment 插件,并定义全局过滤器
// 导入事件格式化组件库
import moment from 'moment'
// 定义时间格式化全局过滤器
Vue.filter('dateFormat', (dateStr, pattern = 'YYYY-DD-MM HH:mm:ss') => {
return moment(dateStr).format(pattern)
})
3、在后续组件中,如果需要转换时间戳,那么在直接引用 dateFormat 即可
{{ 时间戳 | dateFormat }}
方法二:
1、直接在 main.js 文件中定义一个全局过滤器
Vue.filter('dateFormat', function(originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
2、后面需要的时候,直接使用 dateFormat 即可
{{ 时间戳 | dateFormat }}