vue3中如何使用dayjs
更新時間：2024年03月18日 09:08:31 作者：小陽生煎
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3使用dayjs
全局使用
cnpm i dayjs --save
// main.ts
import dayjs from 'dayjs'
const app = createApp(App);
app.use(store).use(router).use(ElementPlus).mount('#app')
app.config.globalProperties.day=dayjs//全局掛載
//使用的頁面
//引用getCurrentInstance
import { reactive,toRefs,getCurrentInstance} from 'vue'
setup() {
const { proxy } = getCurrentInstance() as any;
const day =proxy.day
const data= reactive({
})
const refData = toRefs(data);
return {
...refData,
day
}
}
<template>
<div>
{{day('20170113').format("YYYY-MM-DD HH:mm:ss")}}
</div>
</template>
局部使用
import dayjs from 'dayjs'
//然后return出去
return {
day
}
<template>
<div>
{{day('20170113').format("YYYY-MM-DD HH:mm:ss")}}
</div>
</template>
vue中渲染數(shù)據(jù)使用dayjs進(jìn)行日期格式化
使用VUE+Element-ui做的
dayjs是一個流行的JavaScript日期庫，可以方便地解析、操作和格式化日期。
在vue中通過day.js轉(zhuǎn)化時間格式步驟
1.在終端使用npm安裝day.js
npm install dayjs -S
2.在main.js中導(dǎo)入day.js，并創(chuàng)建全局屬性
import dayjs from "dayjs"; app.config.globalProperties.day = dayjs;
dayjs 庫作為一個全局屬性 day 綁定到 Vue 實例的 config 對象上。
通過這種方式，我們可以在 Vue 應(yīng)用的任意組件中直接調(diào)用 dayjs 庫的方法，而無需每次都引入和初始化該庫。
在 Vue 3.x 中，通過 app.config.globalProperties 創(chuàng)建的全局屬性，只能夠在應(yīng)用的 setup 函數(shù)或 setup 相關(guān)的鉤子函數(shù)（如 setupProps、setupContext 等）中訪問和使用。
在單文件組件中，也可以通過 defineExpose 函數(shù)將全局屬性暴露給組件的父級。
3.在代碼中設(shè)置插槽
<el-table-column prop="validityDateEnd" :label="$t('user.validityDateEnd')" sortable="custom" header-align="center" align="center">
<template v-slot="scope">
{{ dayjs(scope.row.validityDateEnd).format("YYYY-MM-DD") }}
</template>
</el-table-column>4.在后續(xù)使用中可直接進(jìn)行使用
validityDateStart: dayjs(dataForm.validityDate[0]).format(), validityDateEnd: dayjs(dataForm.validityDate[1]).format()
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Element Plus實現(xiàn)自定義彈窗組件的全屏功能
在現(xiàn)代化的前端開發(fā)中,彈窗組件是提升用戶體驗的重要元素,本文將介紹如何使用 Vue 3 和 Element Plus 庫來創(chuàng)建一個具有全屏功能的自定義彈窗組件,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風(fēng)場效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
vite項目添加eslint?prettier及husky方法實例
這篇文章主要為大家介紹了vite項目添加eslint?prettier及實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue+node實現(xiàn)音頻錄制播放,功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了vue踩坑記錄:屬性報undefined錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之列表渲染,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
vue設(shè)置路由title,但刷新頁面時title失效的解決
這篇文章主要介紹了vue設(shè)置路由title，但刷新頁面時title失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12