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时间格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 简单学习5种处理Vue.js异常的方法

    简单学习5种处理Vue.js异常的方法

    这篇文章主要介绍了简单学习5种处理Vue.js异常的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • Vue-router中path的设置方式

    Vue-router中path的设置方式

    这篇文章主要介绍了Vue-router中path的设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue通过style或者class改变样式的实例代码

    vue通过style或者class改变样式的实例代码

    这篇文章主要介绍了vue通过style或者class改变样式的实例代码,在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下
    2018-10-10
  • vue使用el-table 添加行手动填写数据和删除行及提交保存功能

    vue使用el-table 添加行手动填写数据和删除行及提交保存功能

    遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧
    2023-12-12
  • vue3中如何使用d3.js绘制流程图(TS语法)

    vue3中如何使用d3.js绘制流程图(TS语法)

    这篇文章主要给大家介绍了关于vue3中如何使用d3.js绘制流程图的相关资料,D3.js是由javaScript语言编写绘图库,其原理是通过调用一系列内置函数,生成SVG,并在网页渲染,需要的朋友可以参考下
    2023-10-10
  • Vue element-ui el-cascader 只能末级多选问题

    Vue element-ui el-cascader 只能末级多选问题

    这篇文章主要介绍了Vue element-ui el-cascader 只能末级多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue backtop组件的实现完整代码

    vue backtop组件的实现完整代码

    这篇文章主要介绍了vue backtop组件的实现完整代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • vue运行报错cache-loader的解决步骤

    vue运行报错cache-loader的解决步骤

    最近运行vue项目的时候报错了,通过查找相关资料最终解决,下面这篇文章主要给大家介绍了关于vue运行报错cache-loader的解决步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • vue3+ts+EsLint+Prettier规范代码的方法实现

    vue3+ts+EsLint+Prettier规范代码的方法实现

    本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范。感兴趣的可以了解一下
    2021-10-10
  • 基于vue与element实现创建试卷相关功能(实例代码)

    基于vue与element实现创建试卷相关功能(实例代码)

    这篇文章主要介绍了基于vue与element实现创建试卷相关功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12

最新评论