首先使用原生转化的方法

第一种

    //时间转换
dateStr(d, sign) {
//如果没有传递符号,给一个默认的符号
if (!sign) {
sign = '-'
}
//获取d里面年月日时分秒
let year = d.getFullYear(),
month = d.getMonth() + 1,
sun = d.getDate(),
hours = d.getHours(),
minutes = d.getMinutes(),
seconds = d.getSeconds() return (
year +
sign +
this.mendZero(month) +
sign +
this.mendZero(sun) +
' ' +
this.mendZero(hours) +
':' +
this.mendZero(minutes) +
':' +
this.mendZero(seconds)
)
},
//时间转换补零
mendZero(num) {
return (num = num < 10 ? '0' + num : num)
},

调用的时候 就在方法里直接 return 出结果

  // 调用方法
getDate() {
console.log(this.dateStr(new Date()))
},                              输出结果 为 2020-04-20 17:58:54

第二种 这种其实和上边的是一样的思路,只是补零操作 直接用三木判断了,代码更简洁

//时间格式转换
dealWithTime(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
},                                              输出结果 为   2020-04-20 18:04:42

vue的方法 更简单

  使用vue的 moment

  安装 npm install moment --save

  在main.js中全局引入  import moment from 'moment'

  Vue.prototype.$moment = moment
  则在别的文件就可以直接调用了
  

    getDate() {
console.log(this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))
},                                            输出结果 为   2020-4-20 18:04:42

时间格式的转化 vue与js 年月日 时分秒的更多相关文章

  1. js获取当前时间的年月日时分秒以及时间的格式化

    1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear( ...

  2. java中各种时间格式的转化

    http://www.chinaitpower.com/A/2005-01-14/104881.html 使用java.util.Calendar返回间隔天数         static int g ...

  3. 在vue项目中显示实时时间(年月日时分秒)

    1.在data中定义一个变量,存储时间 data(){ return { nowTime:'' } }, 2.给定一个div <div>{{nowTime}}</div> 3. ...

  4. nginx日志修改时间格式为年月日时分秒

    先解除这段注释,使用自定义日志格式 $time_iso8601 生成格式:--20T09::+: $time_local 生成格式: /Apr/::: + 还是选择年月日时分秒看起来舒服一点

  5. jquery获取年月日时分秒当前时间

    获取年月日时分秒的当前时间,可按照某种格式显示出来,下面是一种得到如2017年02月02日  00:00:00格式的当前时间 function getCurrentDate(date){ var y ...

  6. C语言 - 获取系统时间 以年月日时分秒的形式输出

    ESP32需要给下位机通过UART发送时间戳,形式是年月日时分秒的十六进制数据包. #include <stdio.h> #include <time.h> int main( ...

  7. Swift3.0 iOS获取当前时间 - 年月日时分秒星期

    Swift3.0 iOS获取当前时间 - 年月日时分秒星期func getTimes() -> [Int] { var timers: [Int] = [] // 返回的数组 let calen ...

  8. JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;

    学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法 如何创建一个日期对象 语法:new Date(); 功能:创建一个日期时间对象 ...

  9. jsp中/el表达式中将后台传来的时间戳格式化为年月日时分秒

    sp中/el表达式中将后台传来的时间戳格式化为年月日时分秒1.引入相关标签库 <%@taglib prefix="c" uri="http://java.sun.c ...

随机推荐

  1. 李飞飞团队最新论文:基于anchor关键点的类别级物体6D位姿跟踪

    6-PACK: Category-level 6D Pose Tracker with Anchor-Based Keypoints 论文地址: 6-PACK: Category-level 6D P ...

  2. [暴力+前缀和]2019牛客暑期多校训练营(第六场)Upgrading Technology

    链接:https://ac.nowcoder.com/acm/contest/886/J来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...

  3. python爬取中国大学排名

    教程来自:[Python网络爬虫与信息提取].MOOC. 北京理工大学 目标:爬取最好大学网前50名大学 代码如下: import requests from bs4 import Beautiful ...

  4. 基本的访问控制列表ACL配置

    摘要: 访问控制列表ACL (Access Control L ist)是由permit或 deny语句组成的一系列有顺序的规则集合,这些规则根据数据包的源地址.目的地址.源端口.目的端口等信息  来 ...

  5. 干货|Python基础入门 课程笔记(三)

    目录 列表 元组 字典 三元表达式 一.列表 前面学习的字符串可以用来存储一串信息,那么想一想,如果现在有很多人,总不能每个人都起一个变量名把?那岂不得疯~ 咱们可以使用列表. (1)列表得格式和输出 ...

  6. Vue2.0 -- 钩子函数/ 过度属性/常用指令/以及Vue-resoure发送请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 牛客挑战赛38 (A - D)

    A - 多边形与圆 题目链接 题意 给出一个多边形的坐标和圆的半径, 多边形可以在圆内滚动, 问点 1 在成为转动中心到下一次成为转动中心的过程中经过的路程长度. 题解 枚举点 2 - n 成为转动中 ...

  8. 【tensorflow2.0】处理结构化数据-titanic生存预测

    1.准备数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt import tensorflow as t ...

  9. RecyclerView的刷新分页

    在开发中常常使用到刷新分页,这里实现一个 RecyclerView 的简单的刷新分页操作,测试效果见文末,实现过程参考如下: 实现思路 加载更多数据使用到 RecyclerView 加载多种布局,根据 ...

  10. 2019NYIST计科第七次周赛总结

    2019NYIST计科第七次周赛总结 文章目录 2019NYIST计科第七次周赛总结 [秤取物体重量( 二进制枚举法)](https://blog.csdn.net/qq_34261446/artic ...