Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法
一. 問(wèn)題: Vue3如何使用moment設(shè)置顯示時(shí)間格式。
二.分析問(wèn)題：在Vue 3中，因?yàn)檫^(guò)濾器(filter)已經(jīng)被廢棄，取而代之的是全局方法(global method)。slot-scope也被棄用使用v-slot代替。無(wú)法使用過(guò)濾器設(shè)置顯示時(shí)間格式。
三. 解決問(wèn)題。
（1）在vue ui安裝moment依賴，搜索安裝即可。
（2）.在Vue項(xiàng)目的主入口文件（通常是main.js）中，導(dǎo)入moment庫(kù)和要使用的全局方法。
import moment from 'moment'
const app = createApp(App)
app.config.globalProperties.$moment = moment;
app.config.globalProperties.$formatDate = (value) => {
if (!value) return '';
return moment(value).format('YYYY-DD-MM');
};使用：
<el-table-column label="創(chuàng)建時(shí)間" prop="adminCreatetime"><br> <template v-slot="scope">
{{ this.$formatDate(scope.row.adminCreatetime) }}
</template>
</el-table-column>vue3中如何使用moment
1、npm i momet
2、直接在用到的頁(yè)面 import moment from "moment"
3、直接在上邊就可用{{ moment(item.end_time).fromNow() }}//判斷這是多久之前
到此這篇關(guān)于Vue 3 使用moment設(shè)置顯示時(shí)間格式的文章就介紹到這了,更多相關(guān)vue moment時(shí)間格式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
簡(jiǎn)單學(xué)習(xí)5種處理Vue.js異常的方法
這篇文章主要介紹了簡(jiǎn)單學(xué)習(xí)5種處理Vue.js異常的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue通過(guò)style或者class改變樣式的實(shí)例代碼
這篇文章主要介紹了vue通過(guò)style或者class改變樣式的實(shí)例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
vue使用el-table 添加行手動(dòng)填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過(guò)實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-12-12
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語(yǔ)言編寫繪圖庫(kù),其原理是通過(guò)調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁(yè)渲染,需要的朋友可以參考下2023-10-10
Vue?element-ui?el-cascader?只能末級(jí)多選問(wèn)題
這篇文章主要介紹了Vue?element-ui?el-cascader?只能末級(jí)多選問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue backtop組件的實(shí)現(xiàn)完整代碼
這篇文章主要介紹了vue backtop組件的實(shí)現(xiàn)完整代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟
最近運(yùn)行vue項(xiàng)目的時(shí)候報(bào)錯(cuò)了,通過(guò)查找相關(guān)資料最終解決,下面這篇文章主要給大家介紹了關(guān)于vue運(yùn)行報(bào)錯(cuò)cache-loader的解決步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開(kāi)發(fā)時(shí)，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下2021-10-10
基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能(實(shí)例代碼)
這篇文章主要介紹了基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12