vue如何轉換時間格式為年月日時分秒和年月日(補零)
更新時間:2024年04月25日 11:36:58 作者:施玥喵
這篇文章主要介紹了vue如何轉換時間格式為年月日時分秒和年月日(補零),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一.vue轉換時間為年月日(補零)
datatime(value) { var data = new Date(value); var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1; var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate(); this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date; console.log( this.addForm.enter_date) },
效果圖
二.vue 轉換時間格式 為年月日時分秒
方法一
在main.js引入 過濾器
Vue.filter('dateFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') return `${y}-${m}-$vvxyksv9kd ${hh}:${mm}:${ss}` })
在需要的組件里
<el-table-column label="發(fā)生日期和時刻" align="center"> <template slot-scope="scope">{{scope.row.guzhangStartTime | dateFormat}}</template> </el-table-column> //guzhangStartTime 是你表格數(shù)據(jù)里拿到的字段
方法二
npm i moment --save
在main.js中
//轉換時間格式 import moment from 'moment/moment' Vue.filter('moment', function (value, formatString) { formatString = formatString || 'YYYY-MM-DD'; return moment(value).format(formatString); });
在需要的組件里
<el-table-column label="故障記錄日期" align="center"> <template slot-scope="scope">{{scope.row.guzhangjiluTime | moment}}</template> </el-table-column>
效果圖
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03使用form-create動態(tài)生成vue自定義組件和嵌套表單組件
這篇文章主要介紹了使用form-create動態(tài)生成vue自定義組件和嵌套表單組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個屬性,但不能監(jiān)聽整個對象,且無法監(jiān)聽對象屬性的新增和刪除,Proxy可以監(jiān)聽整個對象,且不會修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長度變化2025-01-01vue項目在webpack2實現(xiàn)移動端字體自適配功能
這篇文章主要介紹了vue項目在webpack2實現(xiàn)移動端字體自適配的相關知識,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06