首页 > 其他分享 >vue时间处理

vue时间处理

时间:2023-06-15 20:14:18浏览次数:48  
标签:vue String 处理 时间 date 时分秒

vue时间处理
https://blog.csdn.net/xc9711/article/details/123347629

前言

记录vue对时间的处理

String与时间戳、时间互转
计算时间差
设置时间格式

  1. YYYY-MM-DD HH:mm:ss 年月日 时分秒形式
  2. 以及HH:mm:ss 时分秒形式

时间说明

在此申明以下使用的时间相关的属性

startTime: 开始时间		String类型
endTime:结束时间		String类型
now = new Date() 		当前时间		时间类型
  • 1
  • 2
  • 3

时间处理

String 时间串转为时间类型
首先时间必须的为格式化后的时间:如2022-3-8 12:00:00
例子:

this.startTime= new Date(Date.parse(this.startTime.replace(/-/g,"/")))
  • 1

处理时间格式-时间转String类型
(同步-处理时间格式)
一般来说,处理时间转String均为调用方法去处理
因此为了处理时间转String,优先需要处理设置时间格式

  1. 处理时间格式

在vue中处理时间转格式的在JavaScript代码的

methods: {

}

  • 1
  • 2
  • 3

进行

  1. 将时间处理为年月日-时分秒形式
methods: {
// 将时间转为年月日-时分秒
// 注意,该方法将时间处理为了String
toTimeFormate(date) {
   let Y = date.getFullYear()
   let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
   let D = date.getDate()
   let h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
   let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
   let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
   return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
            },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

使用:在需要使用的地方调用方法,传入时间类型对象

this.endTime=this.toTimeFormate(this.now)
  • 1

计算时间差

计算时间差需要引入moment.js
通过npm引入

cmd 打开命令行
cd/d vue项目地址
npm install moment
  • 1
  • 2
  • 3

然后在main.js调用

import Vue from 'vue'
import moment from "moment";
moment.locale('zh-cn');

Vue.config.productionTip = false
Vue.prototype.$moment = moment
new Vue({
render: h => h(App),
}).$mount('#app')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

最后在方法里调用处理时间差

//将String类型转时间,只有同为时间类型才能进行比较
this.endTime= new Date(Date.parse(this.endTime.replace(/-/g,"/")))
// 计算时间差,最后的结果为时间戳
const time = this.$moment(this.endTime).diff(this.$moment(new Date())) //时间类型time
  • 1
  • 2
  • 3
  • 4

将时间处理为时分秒

methods: {
// 将时间处理为时分秒
// 此方法将时间处理为String类型
           // 时间戳转时分秒
toHHmmss (data) {
      var s;
      var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = (data % (1000 * 60)) / 1000;
      s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
      // 有时在处理数据库传的数据会携带很多小数点0字符,需要切割
      // 如 2022-3-8 12:00:00.000000000
     if (s.length>8){
         s= s.slice(0,8)
        }
       return s;
           },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
使用:
// this.now 时间类型
this.startTime =this.toHHmmss(this.now)
  • 1
  • 2
  • 3

时分秒转时间戳

// 时分秒转时间戳
  toTimeStamp(date) {
     var s = "";
     var hour = date.split(":")[0];
     var min = date.split(":")[1];
     var sec = date.split(":")[2];
     s = Number(hour * 3600) + Number(min * 60) + Number(sec);
     s = s*1000
     return s;
       },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
使用
// 适用于String 转时分秒格式
const time = this.toTimeStamp(this.startTime)
  • 1
  • 2
  • 3

结语

以上为vue对时间的处理,如有遗漏将补充,下一篇发布关于vue如何编写倒计时定时器效果
vue倒计时定时器

标签:vue,String,处理,时间,date,时分秒
From: https://www.cnblogs.com/sunny3158/p/17483988.html

相关文章

  • js中各种时间格式的相互切换
    js中各种时间格式的相互切换https://jingyan.baidu.com/article/d2b1d102aa60941d7e37d4fc.html前端开发中,往往需要使用到各种时间格式,包括中国标准时间,国际标准时间,时间戳,年月日的时间等,这么多种的时间格式,就需要相互转换,本文旨在介绍各种时间格式的转化方法。工具/原料Hbuilde......
  • ActiveMQ InactivityIOException: Channel was inactive for too (>30000) long 处理
    生产服务器上,MQProduce和consumer端同时报如下错误,导致不能正常工作。Transport(tcp://132.97.122.168:61616)failed,reason:org.apache.activemq.transport.InactivityIOException:Channelwasinactivefortoo(>30000)long:tcp://132.97.122.168:61616,attemptingt......
  • 时间转换(tm,mktime,localtime)
    intyear=0;   intmonth=0;   intday=0;   sscanf((char*)strDateInfo,"%4d%2d%2d",&year,&month,&day);    structtmparaTime={0,0,0,day,month-1,year-1900};   __time32_tcurDay= _mktime32(&paraTime);......
  • Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用nginx的proxy_pass 代理跨
    Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用proxy_pass代理跨域转发前言本篇文章用于记录项目前端部署上线遇到的问题,包含对问题的思考、解决思路,以及从中获得的收获。正确的部署流程我也写了一篇文章,供大家参考使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服......
  • KSV 环境实施部署处理
    标签(空格分隔):kubernetes系列一:ksv概述KSV云原生虚拟化(KSV)是由KubeSphere衍生的轻量化虚拟机管理平台,支持单节点部署,简单易用,满足企业的虚拟化业务需求。KubeSphereVirtualization采用了前后端分离的架构,实现了面向云原生的设计,各个模块松耦合设计,单节点起步4coreCP......
  • vue学习记录 4
    本地服务器配置apache安装学习参考网址:(官网下载apache包的时候可能会疯狂断开链接)教程里没说,但是要管理员身份操作cmd。https://blog.csdn.net/qqhruchen/article/details/127457889?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefaul......
  • 信号处理基本知识:频谱/功率与能量/功率谱密度/
      (13条消息)信号频谱、幅度、功率和能量_信号幅度是什么_jackghq的博客-CSDN博客     功率谱密度类似于频谱(Spectrum),但在使用上一定要注意区分,否则容易闹笑话。在了解PSD之前,首先回顾一下信号的分类。信号分为能量信号和功率信号。一个信号不可能既是能量信号又......
  • vue封装公共组件库并发布到npm库
    利用的原理:vue框架提供的api:Vue.use(plugin),我们把封装好组件的项目打包成vue库,并提供install方法,然后发布到npm中。Vue.use(plugin)的时候会自动执行插件中的install方法。 一、组件库代码目录调整1.根目录创建packages文件夹2.在packages文件夹中新增components文......
  • 关于vue 使用setInterval定时器关闭失效的问题 原因为事件传播
    /****data.isPlay为显示那个按钮**startHandle开始定时器setInterval**pauseHandle,stopHandle理解为关闭定时器就好了clearInterval**/<viewclass="btn"@click.stop="startHandle"><viewclass="btn-statusbtn-play"><view......
  • php打印微秒时间
    2023年6月15日16:13:29date()函数默认只能获取到秒级的时间戳,无法直接获取微秒级的时间建议使用DateTimeorDateTimeImmutableDateTime此类与DateTimeImmutable行为相同。区别就是调用有修改行为的方法(比如DateTime::modify())时,会修改对象本身。警告在DateTime类的对......