vue3怎么格式化时间

Vue 3提供了多种方式来格式化时间。其中一种方式是使用内置的过滤器（pipe）来处理时间格式化。你可以使用内置的`|`过滤器来格式化时间。另一种方式是直接调用`Intl.DateTimeFormat`来格式化时间。你可以创建一个`Intl.DateTimeFormat`的实例，并传入相应的参数来定义时间的格式。还有一种方式是使用第三方库，如`date-fns`或`vueuse`来进行时间格式化。

如果你想在Vue 3中使用内置的过滤器来格式化时间，你可以这样做：

<p>{{ date | 过滤器名称 }}</p>

其中，`date`是你要格式化的时间数据，`过滤器名称`是你想要使用的过滤器的名称。

如果你想直接调用`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))
    }
  }
})

其中，`df`是一个`Intl.DateTimeFormat`的实例，你可以根据需要定义时间的格式。

另外，你还可以使用第三方库`vueuse`来进行时间格式化。你可以使用`useDateFormat`函数来格式化时间。具体的使用方法如下：

<template>
  <!-- 显示 -->
  <div>{{ create_time }}</div>
</template>

<script>
import { useDateFormat } from '@vueuse/core'

export default {
  data() {
    return {
      // 需要格式化的时间
      create_time: ''
    }
  },
  created() {
    // 请求过来的数据
    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>

在这个例子中，你可以使用`useDateFormat`函数来格式化时间，将需要格式化的时间和格式化的模板作为参数传入即可。

总结起来，Vue 3提供了多种方式来格式化时间，包括使用内置的过滤器、直接调用`Intl.DateTimeFormat`以及使用第三方库如`vueuse`。你可以根据自己的需求选择合适的方式来进行时间格式化。
#### 引用[.reference_title]
- *1* *2* [vue3中怎么处理时间格式](https://blog.csdn.net/qwe0415/article/details/130350246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue3之时间显示格式化问题](https://blog.csdn.net/su_yun/article/details/127671682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]