vue日期格式化实例
生活随笔
收集整理的這篇文章主要介紹了
vue日期格式化实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這段代碼是我常用來格式化日期用的，很好用。
Date.prototype.toLocaleString = function () { // 重寫日期函數格式化日期return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()}${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes()>=10?this.getMinutes():'0'+this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;};使用辦法
格式化后的日期 = new Date(這里是傳入的毫秒值).toLocaleString();Vue實例
寫到這里大家一定都懂了，不懂的話，我寫了一個Vue實例看看：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用Vue格式化日期---原創馬優晨</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> </head> <script> window.onload = function(){var app = new Vue({el: '#app',data:{timeMes:""},created() {let self = this;self.timeMes = self.dataFormat(new Date(1522611151000))new Date(element.followTime)},methods:{dataFormat(time){return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;}}}) }</script> <body><div id="app">作者：馬優晨 時間：{{timeMes}}</div> </body> </html>效果圖：
如果下圖的“通話時長”的這種時間：
處理函數：
timeDeal(time) { // time 是一個時間戳const timer = +time;const minutes = Math.floor(timer / 60);const seconds =(timer % 3600) % 60 > 9? (timer % 3600) % 60: `0${(timer % 3600) % 60}`;return `${minutes}'${seconds}''`;}總結
以上是生活随笔為你收集整理的vue日期格式化实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端设置使用rem最经典代码
- 下一篇： 使用vue控制元素显示隐藏