首页 > 其他分享 >Vue 3 使用moment设置显示时间格式

Vue 3 使用moment设置显示时间格式

时间:2023-12-10 12:12:56浏览次数:23  
标签:Vue app value 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">
<template v-slot="scope"> {{ this.$formatDate(scope.row.adminCreatetime) }} </template> </el-table-column>

 

标签:Vue,app,value,moment,使用,格式
From: https://www.cnblogs.com/xiyangxixia/p/17892356.html

相关文章

  • vue3学习之createApp(App).mount('#app')
    装了vue-cli之后,新建个项目跑起来了,碰上个没理解的问题,不知道createApp(App).mount('#app')挂载的这个id=“app”从哪冒出来的 用命令创建出来的项目,components/HelloWorld.vue,App.vue,main.js中都没有估摸着得是底层的,网上找一圈,各路大神基本是一句带过,可能是太简单了,没......
  • 使用Vue和Element UI进行文件上传的简单教程
    当使用Vue和ElementUI进行文件上传时,你可以按照以下步骤进行操作:步骤1:安装Vue和ElementUI在你的Vue项目中使用npm或者yarn安装Vue和ElementUI:npminstallvueelement-ui步骤2:创建上传组件创建一个Vue组件来处理文件上传的逻辑。在组件的<template>中添加一个文件上传的按钮和......
  • 【前端框架Vue】Vue是什么?怎么用?
    Vue是JS的一种框架,用于构建用户界面的JS框架。可以理解为,Vue通过指令和模板语法,将数据和HTML模板关联起来,实现一种响应式的数据驱动视图的方式Vue是什么?Vue是JS的一种框架,用于构建用户界面的JS框架。可以理解为,Vue通过指令和模板语法,将数据和HTML模板关联起来,实现一种响应式的......
  • PWN-非栈上格式化字符串之.fini_array劫持
    1..fini_array劫持上周打了一下金盾杯,算是第一次做非栈上格式化字符串的题,之前只在ctfwiki上看过一点。边学边做,比赛最后一个小时做出来了,爽了。以金盾杯的题为例1.12023金盾杯sign_format题目介绍:一道非栈上的格式化字符串,通过修改dl_fini数组里的偏移值,使函数在退出时执......
  • Vue源码学习(十八):实现组件注册(一)Vue.component()和Vue.extend()
    好家伙, 0.完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.思路1.1.什么是组件化? Vue组件化是指将复杂的应用程序拆分成多个独立的、可复用的组件,这些组件可以实现特定的功能或局部功能。组件化有助于提高开发效率、方便重复使用、简化调试步骤......
  • Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
    目录第一个Vue-cli应用什么是vue-cli?vue-cli主要功能:搭建需要的环境1、nvm-windows下载2、安装nvm3、修改nvm环境变量4、通过nvm安装node5、安装全局npm6、一些替代npm的方式安装vue-cli第一个脚手项目配置命令行运行Vue项目IDEA运行Vue项目第一个Vue-cli应用之前练习了Vue一些......
  • Vue学习之Vue的计算属性与Vue内容分发
    vue计算属性vue计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已<!DOCTYPEhtml><html><head><metacharset="U......
  • Vue学习之参数传递与事件分发使用this.$emit(‘自定义事件名‘, 参数)自定义事件删除
    ......
  • Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
    创建Vue项目打开cmd命令行界面,创建一个全新的vue项目,我们命名为hello-vue,这里附上ElementUI网址如下:ElementUI#使用webpack打包工具初始化一个名为hello-vue的工程vueinitwebpackhello-vueNPM安装相关组件依赖时可能会遇到权限问题,此时使用PowerShell管理员模式运行即......
  • sql中sysdate 和 current_date 的区别及to_char( tv_date, ‘YYYY-MM-DD‘)当天时间与
    sysdate和current_date的区别在oracle中current_date与sysdate都是显示当前系统时间,其结果基本相同,但是有三点区别:1.current_date返回的是当前会话时间,而sysdate返回的是服务器时间;2.current_date有时比sysdate快一秒,这可能是四舍五入的结果;3.如果修改......