> 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/useboolean.md).

# useBoolean

#### 基础用法

```html
<template>
<div>
    <button @click="setOpenModal">Open Modal</button>
    <div v-if="isOpenModal">
      <input type="text" :value="text" @change="handleChange" />
      <button @click="handleSubmit">Submit</button>
      <button @click="setCloseModal">Close Modal</button>
    </div>
    <div v-else>Submit：{{text}}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useBoolean } from "hooks-vue3";
const text = ref("");
const [isOpenModal, setOpenModal, setCloseModal] = useBoolean();

const handleChange = (event: any) => {
  text.value = event.target.value;
};

const handleSubmit = () => {
  setCloseModal();
};
</script>
```

### API

```typescript
const [state, setTrue, setFalse] = useBoolean(
  defaultValue?: boolean,
);
```

### 参数TS类型

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

function useBoolean (
  defaultBoolean = false,
): [state: Readonly<Ref<boolean>>, setTrue: () => void, setFalse: () => void] 
```