Vue 3 使用moment设置显示时间格式的问题及解决方法
更新时间：2023年12月11日 11:39:35 作者：夕阳西下_720
在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method),本文给大家介绍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中如何实时监听div元素盒子的宽高的相关资料,在Vue中你可以使用Vue的计算属性和侦听器来动态监测元素的高度,文中给出了简单代码示例,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通过监听器函数接收新旧值,实现属性间的数据联动,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了vue开发拖拽进度条滑动组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了通过fastclick源码分析彻底解决tap“点透”问题的知识内容，有兴趣的朋友学习一下吧。2017-12-12
这篇文章主要介绍了Vue 实现显示/隐藏层的思路（加全局点击事件）,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要为大家介绍了结合康熙选秀讲解vue虚拟列表的原理使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue中.vue文件比main.js先执行的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
文章详细介绍了HTML5 Canvas的模板区、样式区和脚本区的使用方法,包括如何设置Canvas的宽高、水平居中、获取Canvas元素、绘制图形（直线、矩形、圆、文字）、转换为Base64、下载图片以及加载图片并添加文字水印等操作2025-10-10
easycom模式开发UNI-APP组件调用必须掌握的实用技巧
uni-app基于VUE开发，通常组件的使用都是先安装，然后全局或者局部引入，注册，今天通过本文给大家分享easycom模式开发UNI-APP组件调用必须掌握的实用技巧，需要的朋友一起看看吧2021-08-08
最新评论