Snippet

Umschalten von booleschen Sichtbarkeits-Flags

Die Steuerung von Oberflächenelementen wie Dialogen oder Menüs basiert häufig auf booleschen Werten in Vue-Refs. Der logische NOT-Operator `!` bietet eine einfache Umschaltlogik, während explizite Zuweisungen deterministische Zustände sicherstellen.

snippet.js

javascript

import { ref } from 'vue';
 
const isModalVisible = ref(false);
 
function toggleModal() {
  isModalVisible.value = !isModalVisible.value;
}
 
function closeModal() {
  isModalVisible.value = false;
}

vue

Erklärung

const isModalVisible = ref(false);

Deklariert einen booleschen reaktiven Zustand mit dem Anfangswert false.

isModalVisible.value = !isModalVisible.value;

Invertiert den aktuellen booleschen Wert, um zwischen sichtbar und unsichtbar zu wechseln.

isModalVisible.value = false;

Setzt den Wert explizit auf false, um das Schließen des Dialogs zu garantieren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Umschalten von booleschen Sichtbarkeits-Flags

Verwandt