1.樣式：

2.思路：

這里我用的是用elementui框架搭的結(jié)構(gòu)，其中圖標icon采用的是插槽。

prefix：指的是插在前面

suffix：指的是插在后面

<span class="currentDate"><span slot="prefix" class="el-icon-timer"></span>{{dateFormat(date)}}</span>

css樣式：

.currentDate{display: inline-block;vertical-align: text-bottom;width: 200px;height: 24px;line-height: 24px;color:#7D7D87;// border: 1px solid red;margin-left: 20px }

接下來看具體代碼：

data() {return {date:new Date(),}}, mounted(){//獲取當前日期let that= this;this.timer = setInterval(function() {that.date = new Date().toLocaleString();});}, beforeDestroy: function() {if (this.timer) {clearInterval(this.timer);}}, methods:{//當前日期格式化dateFormat(){var date = new Date()var year = date.getFullYear()var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()// var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()// var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()// var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()return year + '-' +month + '-' + day}}

完成

總結(jié)

以上是生活随笔為你收集整理的vue获取当前日期和时间并进行格式化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。