vue --- > 全局配置过滤函数,使用moment函数来格式化时间

2024-03-13 19:18:57

效果1

YYYY-MM-DD

效果2

YYYY-MM-DD HH:mm:ss

配置注意事项

由于时间格式化,在大多数页面中都会用到,因此建议配置在全局中
使用moment函数 -> http://momentjs.cn/
npm 安装

# 命令行
cnpm i  moment -S

在全局中配置

// main.js
import moment from 'moment'

Vue.filter('dateFormat', (str, partten = "YYYY-MM-DD HH:mm:ss") => {
    return moment(str).format(pattern);
})

在组件中使用1

// NewsList.vue
<p class="mui-ellipsis">
    <span>发表时间: {{ item.add_time | dateFormat }} </span>
</p>

// 2019-09-19 16:11:33

在组件中使用2

// NewsList.vue
<p class="mui-ellipsis">
    <span>发表时间: {{ item.add_time | dateFormat("YYYY-MM-DD") }} </span>
</p>

// 2019-09-19