> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/usetoggle.md).

# useToggle

#### 基础用法

```html
<template>
  <div>
    <h3>Example1</h3>
    <div>
      <p>Value: {{ value ? "On" : "Off" }}</p>
      <button @click="toggle()">Toggle</button>
    </div>
    <h3>Example2</h3>
    <div>
      <p>Value2: {{ value2 }}</p>
      <button @click="toggle2()">Toggle</button>
    </div>
    <h3>Example3</h3>
    <div>
      <p>Value3: {{ value3 }}</p>
      <button @click="toggle3(false)">No</button>
      <button @click="toggle3(true)">Yes</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useToggle } from "hooks-vue3";
const [value, toggle] = useToggle(false);

const [value2, toggle2] = useToggle(true, {
  true: "Yes",
  false: "No",
});
const [value3, toggle3] = useToggle(true, {
  true: "Yes",
  false: "No",
});
</script>

```

### API

```typescript
const [value, toggle] = useToggle(false);
```

### 参数TS类型

```typescript
import type { ComputedRef } from 'vue';

type UseToggleState<T> = T | (() => T);

export interface UseToggleOptions<U, S> {
  true?: UseToggleState<U>;
  false?: UseToggleState<S>;
}

function useToggle<U, S>(
  initialValue?: UseToggleState<boolean>,
  options?: UseToggleOptions<U, S>,
): [ComputedRef<U | boolean | S>, (value?: boolean) => void]
```