1.未转化前的时间样式

2.显示正常的时间样式2022-10-10 09:16

2.1时间的最外层基础

• 打印时间放置的div盒子;

<div class="printTime">
<span>打印时间:</span>
{{printdate}}
</div>

• css样式

<style>
.printTime {
font-size:12px;
display:flex;
align-items:center;
width:35%;
}
</style>

2.2如何让时间显示出来

• 怎么给printdate赋值;
  • 现在data里面定义printdate

  data(){
  return {
   printdate: '',
    }
  }
  

  • 接着进行函数操作，获取值；当创建页面时，时间就要出现；

  created(){
  let date = new Date（）
  this.printdate = date
  }
  

  • 把date直接赋值给printdate，页面上此时会显示原始状态的时间打印时间:Mon Oct 10 2022 09:35:11 GMT+0800 (中国标准时间)

3.重视一下Date，这是一个对象

3.1 Date对象简介

• 日期和时间在web中随处可见，也必不可少；
• JS脚本内置了Date对象，该对象为我们提供了一些操作时间和日期的方法；

3.2 使用new来调用创建日期对象（即构造对象）

• 构造当前时间对象，主要有以下4种方法；

var MyDate = new Date()
var MyDate = new Date(milliseconds)
var MyDate = new Date(string)
var MyDate = new Date(y, m, d, h, min, sec, ms)

• 现在只需要学会第一个，其他的还不会；
• 这个new Date出来就是一个国际样式的时间： Mon Oct 10 2022 10:34:52 GMT+0800 (中国标准时间)

今天的重点是转化这个时间格式

• 引入了一个插件moment.js；

import moment from 'moment'

• 直接转换成想要的样式就可以了；

created() {
	 let date = new Date()
	 this.printdate = moment(date).format('YYYY-MM-DD HH:mm:ss')
	},

• 正确的时间显示如下；

正确全部代码如下

<div class="printTime">
<span>打印时间:</span>
{{printdate}}
</div>
<script>
import moment from 'moment'
 data(){
  return {
   printdate: '',
    }
  },
   created(){
  let date = new Date（）
  this.printdate = date
  }
  </script>
<style>
.printTime {
font-size:12px;
display:flex;
align-items:center;
width:35%;
}
</style>