vue 日期面板_VUE项目中如何方便的转换日期和时间

做项目开发时对各种不同的时间进行处理是一件不可避免的事情，比如Unix时间戳需要转换为具体的时间来显示，或者需要根据给出的时间格式化成想要的形式，接下来就拿目前最流行的VUE框架来详细阐述如何对时间进行加工。

处理日期时间的工具

目前最为流行的处理日期时间的工具是momentjs，官网有中文版，有兴趣的可以去查看官网的文档。

安装momentjs

使用npm或者yarn可以快速安装momentjs

如

npm install moment -save

或者

yarn add moment

安装完成后打开main.js，在import Vue from "vue"后面插入以下代码

import moment from "moment";

Vue.prototype.$moment = moment;

这样momentjs就安装完成了，组件已经挂载到this.$moment上了，后续可以直接通过this.$moment来调用。

momentjs的时间处理分成两部分，第一部分将现有时间转换为momentjs时间，第二部分将momentjs时间格式化成自己想要的时间格式

将现有时间转换为momentjs时间

1、Unix时间戳

$this.$moment.unix(1601481600)

2、标准时间

$this.$moment('2020-01-01 10:08:12')

3、当前时间

$this.$moment()

将momentjs时间格式化

为了方便表示，我们就以当前时间的格式化来举例。

$this.$moment().format("YYYY-MM-DD")

具体的格式化参数可以参照以下表格。

日期时间的加减计算

例如明天的日期

$this.$moment().add(1, 'days');

vue 日期面板_VUE项目中如何方便的转换日期和时间相关推荐

js获取当前日期_vue项目中获取前后N天日期
1.moment.js实现安装&引入 npm 获取今天日期 var 获取过去/未来N天的日期 // 过去文档 | Moment.js 中文网momentjs.cn PS:如果是在andv ...
bpmn2 vue 设计器_vue项目中使用bpmn-基础篇
后退前进下载 style="display: inline-block;":file-list="fileList"class="upload-d ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue 日期面板_Vue实战：日期选择器
在日常工作中需要填写日期的时候,会用到日期选择器,来方便的进行日.月.年的选择.这里我们会用Vue来实现一个日期选择器,效果如下: 实现功能:日期选择弹出层选择天面板选择月面版选择年面版支持用 ...
vue 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragStart($event, item.labelName)" draggable='true ...
vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
vue 方法获取返回值_Vue项目中Api的组织和返回数据处理的操作
项目中的所有Api配置放在一个文件中,便于查找和修改,Api的版本从配置文件(config.js)中读取,采用 apiPrefix + url 的形式组成. 在配置文件中,Api 的配置采用 Http ...

vue 日期面板_VUE项目中如何方便的转换日期和时间

vue 日期面板_VUE项目中如何方便的转换日期和时间相关推荐

最新文章

热门文章