vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零)
更新時(shí)間：2024年04月25日 11:36:58 作者：施玥喵
這篇文章主要介紹了vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一.vue轉(zhuǎn)換時(shí)間為年月日（補(bǔ)零）
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 轉(zhuǎn)換時(shí)間格式 為年月日時(shí)分秒
方法一
在main.js引入 過(guò)濾器
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}-$wppm3vysvbp ${hh}:${mm}:${ss}`
})在需要的組件里
<el-table-column label="發(fā)生日期和時(shí)刻" align="center">
<template slot-scope="scope">{{scope.row.guzhangStartTime | dateFormat}}</template>
</el-table-column>
//guzhangStartTime 是你表格數(shù)據(jù)里拿到的字段方法二
npm i moment --save
在main.js中
//轉(zhuǎn)換時(shí)間格式
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>效果圖
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue3.0中封裝button使用slot組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Element?plus?表單中下拉框的空值問(wèn)題解決
有時(shí)候會(huì)碰到查詢條件需要用下拉框來(lái)區(qū)分的時(shí)候,比如需要區(qū)分全部?|?啟用?|?停用三個(gè)狀態(tài),這時(shí)一般會(huì)給全部的value值設(shè)置為'',但是這樣會(huì)導(dǎo)致下拉框無(wú)法選中對(duì)應(yīng)的全部選項(xiàng),本文就來(lái)介紹一下這個(gè)問(wèn)題解決,感興趣的可以了解一下2024-11-11
詳解VScode編輯器vue環(huán)境搭建所遇問(wèn)題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問(wèn)題解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)版本檢測(cè)與升級(jí)提示
在現(xiàn)代Web應(yīng)用開(kāi)發(fā)中,版本檢測(cè)與升級(jí)提示是提升用戶體驗(yàn)的重要環(huán)節(jié),本文將詳細(xì)介紹如何在Vue應(yīng)用中實(shí)現(xiàn)這一功能,有需要的小伙伴可以參考一下2025-04-04
為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解
這篇文章主要為大家介紹了為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue-router傳參的四種方式超詳細(xì),有router-link路由導(dǎo)航方式傳參，調(diào)用$router.push實(shí)現(xiàn)路由傳參，通過(guò)路由屬性name匹配路由，再根據(jù)params傳遞參數(shù)等等，結(jié)合示例代碼講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)
這篇文章主要介紹了vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
electron實(shí)現(xiàn)靜默打印的示例代碼
這篇文章主要介紹了electron實(shí)現(xiàn)靜默打印的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁(yè)面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05