javascript / beginner
Snippet
Toggling Boolean Visibility Flags
Controlling UI state such as modals or accordions relies heavily on boolean primitive values stored in Vue refs. Using the logical NOT operator `!` provides a straightforward toggle mechanism, while explicit assignment functions enforce deterministic states.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { ref } from 'vue';const isModalVisible = ref(false);function toggleModal() {isModalVisible.value = !isModalVisible.value;}function closeModal() {isModalVisible.value = false;}
vue
Breakdown
1
const isModalVisible = ref(false);
Declares a boolean reactive state initialized to false.
2
isModalVisible.value = !isModalVisible.value;
Inverts the current boolean value to flip between visible and hidden states.
3
isModalVisible.value = false;
Explicitly sets the boolean flag to false to guarantee modal closure.