vue3之时间显示格式化问题

原创已于 2022-11-07 14:48:41 修改 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-11-03 15:52:14 首次发布

本文探讨了Vue3中为何移除过滤器(filter)，并介绍了使用useDateFormat进行时间格式化的替代方案。通过具体实例展示了如何在Vue3项目中实现常见日期格式的转换。

vue3之时间显示格式化问题

一、vue3为什么删除filter（过滤器）
其实原因就是vue3要精简代码，而filter功能重复，filter能实现的功能，用methods和computed方法基本上也可以实现，所以关于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:{
      //请求过来的数据
      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>