介绍 👇 👇 👇
useNow响应式获取当前时间。如果使用JavaScript实现一个动态时间显示的话。你得写不少代码。比如获取当前时间new Date(),再获取年月日等等,你还得使用setTimeout写个定时器不停的刷新元素。但是useNow帮我们封装好了,现在你只需要两行代码即可实现。简直不要太方便😍
useNow返回的是一个Date类型(日期对象)
<template>
<div class="demo">
{{now}}
</div>
</template>
<script lang="ts" setup>
import { useNow } from '@vueuse/core'
const now = useNow()
</script>
上图可以看到,每一秒都是变化的,说明是响应式的,但是呢日期格式并没有处理。vueuse贴心的为你准备日期格式化工具。useDateFormat。你不用再自己封装,我们常用的日期格式化它都能满足。useNow和useDateFormat的使用方法以及参数都在下面示例代码以及注释中😏。
注:下面的例子中使用的vue3写法,因为我做了按需引入配置,对应的api自己手动引入一下。
Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]
示例✨ ⭐️ 🌟
<template>
<div class="demo">
<div>
{{formatted}}
</div>
<div>
{{newDate}}
</div>
<div>
{{YMD}}
</div>
<div>
{{YMDUnit}}
</div>
<div>
{{formattedUnit}}
</div>
<div>
{{isActive}}
</div>
<el-button @click="pause()">Pause</el-button>
<el-button @click="resume()">Resume</el-button>
</div>
</template>
<script lang="ts" setup>
import { useNow, useDateFormat } from '@vueuse/core'
// useNow接收一个参数 options对象
// {
// controls?: Controls;
// interval?: 'requestAnimationFrame' | number;
// }
// controls暴露更多方法,默认为false interval可以认为时间隔多久执行一次刷新
// 如果controls传入的时true的话 使用方法就变成const { now } = useNow({controls: true})
// 除了返回now时间对象,还包括pause暂停和resume恢复两个方法
// 以及isActive 当前动画处于pause状态还是resume状态
// 感兴趣的可以去看看源码
const { now, pause, resume, isActive } = useNow({controls: true})
// const now = useNow()
// useDateFormat接收两个参数, 第一个是日期对象或者日期字符串,第二个参数就是formatStr。
// 官方示例还支持第三个参数,实现与语言环境一起使用,感兴趣的自行去研究
const formatted = useDateFormat(now, 'YYYY-MM-DD HH:mm:ss')
const newDate = useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
const YMD = useDateFormat(new Date(), 'YYYY-MM-DD')
const YMDUnit = useDateFormat('2022-08-05', 'YYYY年MM月DD日')
const formattedUnit = useDateFormat(now, 'YYYY年MM月DD日 HH时mm分ss秒')
</script>
<style lang="less">
.demo {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> div {
margin-bottom: 20px;
}
> button {
margin-bottom: 20px;
}
}
</style>
我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。
👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇