useNow日期和useDateFormat日期格式化的使用方法以及案例(Vue3)

介绍 👇 👇 👇
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。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇