useToggle

具有实用函数的布尔切换器。

¥A boolean switcher with utility functions.

示例

source

Value: OFF

用法

¥Usage

import { useToggle } from '@vueuse/core'

const [value, toggle] = useToggle()

当你传递 ref 时，useToggle 将返回一个简单的切换函数：

¥When you pass a ref, useToggle will return a simple toggle function instead:

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

注意：请注意，切换函数接受第一个参数作为覆盖值。你可能希望避免直接将函数传递给模板中的事件，因为事件对象将传入。

¥Note: be aware that the toggle function accepts the first argument as the override value. You might want to avoid directly passing the function to events in the template, as the event object will pass in.

<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />

类型声明

export interface UseToggleOptions<Truthy, Falsy> {
  truthyValue?: MaybeRefOrGetter<Truthy>
  falsyValue?: MaybeRefOrGetter<Falsy>
}
export declare function useToggle<Truthy, Falsy, T = Truthy | Falsy>(
  initialValue: Ref<T>,
  options?: UseToggleOptions<Truthy, Falsy>,
): (value?: T) => T
export declare function useToggle<
  Truthy = true,
  Falsy = false,
  T = Truthy | Falsy,
>(
  initialValue?: T,
  options?: UseToggleOptions<Truthy, Falsy>,
): [Ref<T>, (value?: T) => T]

源代码

源代码 • 示例 • 文档

变更日志

No recent changes