vue2/vue3 Composition Api 常用工具集, @vueuse/core 之核心函数 time 实践

作者: tww844475003 分类: 前端开发 发布时间: 2023-08-27 18:18

useDateFormat

格式化日期格式

格式入参,使用方法类似 dayjs

格式输出信息描述
YY18两位数年份
YYYY2018 年四位数的年份
M1-12这个月,从1点开始
MM01-12月份,2位数
MMM1月-12月缩写的月份名称
MMMM1月-12月完整的月份名称
D1-31每月的哪一天
DD01-31月份的哪一天,2位数
H0-23小时
HH00-23小时,2位数
h1-12小时,12小时时钟
hh01-12小时,12小时时钟,2位数
m0-59一分钟
mm00-59分钟,2位数
s0-59第二个
ss00-59第二个,2位数
SSS000-999毫秒,3位数
A上午下午merridiem
AA上午下午经络,周期
a下午上午meridiem,小写
aa上午下午经文、小写和句号
d0-6一周中的某一天,周日为0
ddS-S一周中哪一天的最小名称
ddd周日-周六一周中哪一天的短名称
dddd周日至周六一周中的一天的名称
<script lang="ts" setup>
import { ref } from 'vue'
import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
const formatted2 = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locale: 'zh-CN' })
</script>

<template>
  <div class="use-date-format">
    <p>{{ formatted }}</p>
    <p>{{ formatted2 }}</p>
  </div>
</template>

输出格式如下:

2023-08-27 17:48:40

2023-08-27 (周日)

useTimeAgo

响应式时间计算,过去了多长时间,经典使用场景,购物应用,评论过去了多长时间

<script lang="ts" setup>
import { useTimeAgo, formatTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2022, 11, 11))
const timeAgo2 = formatTimeAgo(new Date(2022, 11, 11))
</script>

<template>
  <div class="use-time-ago">
    {{ timeAgo }}<br />
    <h3>非响应式</h3>
    {{ timeAgo2 }}
  </div>
</template>
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注