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