VueUse中文文档useNow
响应式获取当前 Date 实例。
Reactive current Date instance.
例子
Now: Fri Mar 31 2023 11:59:05 GMT+0800 (中国标准时间)
Usage
js
import { useNow } from '@vueuse/core'
const now = useNow()
import { useNow } from '@vueuse/core'
const now = useNow()
js
const { now, pause, resume } = useNow({ controls: true })
const { now, pause, resume } = useNow({ controls: true })
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseNow v-slot="{ now, pause, resume }">
Now: {{ now }}
<button @click="pause()">Pause</button>
<button @click="resume()">Resume</button>
</UseNow>
<UseNow v-slot="{ now, pause, resume }">
Now: {{ now }}
<button @click="pause()">Pause</button>
<button @click="resume()">Resume</button>
</UseNow>
Type Declarations
typescript
export interface UseNowOptions<Controls extends boolean> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Update interval, or use requestAnimationFrame
*
* @default requestAnimationFrame
*/
interval?: "requestAnimationFrame" | number
}
/**
* Reactive current Date instance.
*
* @see https://vueuse.org/useNow
* @param options
*/
export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
export declare function useNow(options: UseNowOptions<true>): {
now: Ref<Date>
} & Pausable
export type UseNowReturn = ReturnType<typeof useNow>
export interface UseNowOptions<Controls extends boolean> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Update interval, or use requestAnimationFrame
*
* @default requestAnimationFrame
*/
interval?: "requestAnimationFrame" | number
}
/**
* Reactive current Date instance.
*
* @see https://vueuse.org/useNow
* @param options
*/
export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
export declare function useNow(options: UseNowOptions<true>): {
now: Ref<Date>
} & Pausable
export type UseNowReturn = ReturnType<typeof useNow>