vue3關(guān)于時(shí)間顯示格式化的問(wèn)題
vue3時(shí)間顯示格式化
vue3為什么刪除filter（過(guò)濾器）
其實(shí)原因就是vue3要精簡(jiǎn)代碼
而filter功能重復(fù)，filter能實(shí)現(xiàn)的功能
用methods和computed方法基本上也可以實(shí)現(xiàn)
所以關(guān)于filter的vue源代碼就被刪除了，也更加方便維護(hù)
vue2的時(shí)間格式化
先引用useDateFormat
vue3的時(shí)間格式化
vueuse
在這里插入代碼片
<template>
<!-- 顯示 -->
<div>{{create_time}}</div>
</template>
```<script>
import { useDateFormat } from '@vueuse/core'
export default {
data(){
return{
//需要格式化的時(shí)間
create_time:' '
}
},
created() {
},
methods:{
//請(qǐng)求過(guò)來(lái)的數(shù)據(jù)
this.create_time = useDateFormat(這里寫(xiě)你要格式化的時(shí)間例如：res.data.goods.create_time,'YYYY-MM-DD')
//可以格式化
/*YYYY-MM-DD HH:mm:ss
YYYY年MM月DD日
YYYY年MM月DD日 HH時(shí)mm分ss秒
*/
}
}
</script>vue3如何處理時(shí)間格式
在Vue3中處理時(shí)間格式,有幾種方式:
使用過(guò)去運(yùn)算符 |
Vue3新增的過(guò)去運(yùn)算符可以簡(jiǎn)單格式化時(shí)間。
例如：
<p>{{ 2021-10-10 | date }}</p>
<p>{{ 2021-10-10 | time }}</p>
<p>{{ 2021-10-10 | datetime }}</p>渲染：
10/10/2021
10:00:00
10/10/2021 10:00:00
使用 DateTimeFormat
Vue3支持直接使用 Intl.DateTimeFormat 格式化時(shí)間。
例如：
const df = new Intl.DateTimeFormat('en', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
new Vue({
template: '<p>{{ date }}</p>',
computed: {
date() {
return df.format(new Date(2021, 9, 10))
}
}
}) 這會(huì)渲染：
October 10, 2021
使用第三方庫(kù)
可以使用 date-fns 等第三方庫(kù)格式化時(shí)間。
例如：
import { format } from 'date-fns'
new Vue({
template: '<p>{{ date }}</p>',
computed: {
date() {
return format(new Date(2021, 9, 10), 'MMM dd, yyyy')
}
}
})這也會(huì)渲染：October 10, 2021所以，在 Vue3中主要的處理時(shí)間格式化的方式是：
1.使用內(nèi)置的 | 過(guò)去運(yùn)算符
2.直接調(diào)用 Intl.DateTimeFormat
3.使用第三方庫(kù)如 date-fns與 Vue 2 相比,Vue 3 簡(jiǎn)化了時(shí)間格式化,內(nèi)置支持更豐富的格式化功能,也更好的支持現(xiàn)代環(huán)境的 API 如 Intl。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)九宮格圖片展示模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了讓Vue響應(yīng)Map或Set的變化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue項(xiàng)目的甘特圖組件之dhtmlx-gantt使用教程和實(shí)現(xiàn)效果展示(推薦)
文章介紹了如何使用dhtmlx-gantt組件來(lái)實(shí)現(xiàn)公司的甘特圖需求,并提供了一個(gè)簡(jiǎn)單的Vue組件示例,文章還分享了一些配置項(xiàng),如格式化表頭日期、設(shè)置甘特圖尺寸、啟用只讀模式、設(shè)置表格列等,感興趣的朋友一起看看吧2025-02-02
Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
監(jiān)聽(tīng)事件是我們?cè)谑褂胿ue.js的時(shí)候經(jīng)常使用的一個(gè)功能，下面這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn) 的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
vue3中的任何一個(gè)組合式api都可以單獨(dú)抽離出去在另一個(gè)文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下2022-08-08
vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法
今天小編就為大家分享一篇vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue?this.$toast?失效問(wèn)題匯總,本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2024-03-03
解決webpack+Vue引入iView找不到字體文件的問(wèn)題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見(jiàn)時(shí)對(duì)其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04