vue3關(guān)于時間顯示格式化的問題

更新時間：2024年03月18日 09:25:53 作者：漂亮小咪

這篇文章主要介紹了vue3關(guān)于時間顯示格式化的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3時間顯示格式化

vue3為什么刪除filter（過濾器）

其實原因就是vue3要精簡代碼

而filter功能重復(fù)，filter能實現(xiàn)的功能

用methods和computed方法基本上也可以實現(xiàn)

所以關(guān)于filter的vue源代碼就被刪除了，也更加方便維護

vue2的時間格式化

先引用useDateFormat

vue3的時間格式化

vueuse

在這里插入代碼片
<template>
<!-- 顯示 -->
  <div>{{create_time}}</div>
</template>
```<script>
import { useDateFormat } from '@vueuse/core'
export default {
  data(){
      return{
      //需要格式化的時間
		create_time:' '
      }
  },
  created() {
	
  },
  methods:{
      //請求過來的數(shù)據(jù)
      this.create_time = useDateFormat(這里寫你要格式化的時間例如：res.data.goods.create_time,'YYYY-MM-DD')
      //可以格式化
      /*YYYY-MM-DD HH:mm:ss
		YYYY年MM月DD日
		YYYY年MM月DD日 HH時mm分ss秒
     */
  }
}
</script>

vue3如何處理時間格式

在Vue3中處理時間格式,有幾種方式:

使用過去運算符 |

Vue3新增的過去運算符可以簡單格式化時間。

例如：

<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 格式化時間。

例如：

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)) 
    }
  }  
})

這會渲染：

October 10, 2021

使用第三方庫

可以使用 date-fns 等第三方庫格式化時間。

例如：

import { format } from 'date-fns'
 
new Vue({
  template: '<p>{{ date }}</p>',
  computed: {
    date() {
      return format(new Date(2021, 9, 10), 'MMM dd, yyyy')
    }
  }
})

這也會渲染：October 10, 2021所以，在 Vue3中主要的處理時間格式化的方式是：

1.使用內(nèi)置的 | 過去運算符

2.直接調(diào)用 Intl.DateTimeFormat

3.使用第三方庫如 date-fns與 Vue 2 相比,Vue 3 簡化了時間格式化,內(nèi)置支持更豐富的格式化功能,也更好的支持現(xiàn)代環(huán)境的 API 如 Intl。