Vue 3 使用moment设置显示时间格式的问题及解决方法
一. 问题: Vue3如何使用moment设置显示时间格式。
二.分析问题:在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method)。slot-scope也被弃用使用v-slot代替。无法使用过滤器设置显示时间格式。
三. 解决问题。
(1)在vue ui安装moment依赖,搜索安装即可。

(2).在Vue项目的主入口文件(通常是main.js)中,导入moment库和要使用的全局方法。
import moment from 'moment'
const app = createApp(App)
app.config.globalProperties.$moment = moment;
app.config.globalProperties.$formatDate = (value) => {
if (!value) return '';
return moment(value).format('YYYY-DD-MM');
};使用:
<el-table-column label="创建时间" prop="adminCreatetime"><br> <template v-slot="scope">
{{ this.$formatDate(scope.row.adminCreatetime) }}
</template>
</el-table-column>vue3中如何使用moment
1、npm i momet
2、直接在用到的页面 import moment from "moment"
3、直接在上边就可用{{ moment(item.end_time).fromNow() }}//判断这是多久之前
到此这篇关于Vue 3 使用moment设置显示时间格式的文章就介绍到这了,更多相关vue moment时间格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue使用el-table 添加行手动填写数据和删除行及提交保存功能
遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧2023-12-12
Vue element-ui el-cascader 只能末级多选问题
这篇文章主要介绍了Vue element-ui el-cascader 只能末级多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
vue3+ts+EsLint+Prettier规范代码的方法实现
本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范。感兴趣的可以了解一下2021-10-10


最新评论