Renderowanie warunkowe Vue.js

Renderowanie warunkowe w Vue.js umożliwia dynamiczne wyświetlanie lub ukrywanie elementów w oparciu o określone warunki. Ta funkcja jest niezbędna do tworzenia responsywnych i interaktywnych interfejsów użytkownika. Vue.js udostępnia kilka dyrektyw do obsługi renderowania warunkowego, umożliwiając efektywne zarządzanie widocznością elementów w aplikacji.

Dyrektywa v-if

Dyrektywa v-if służy do warunkowego renderowania elementów na podstawie prawdziwości wyrażenia. Jeśli wyrażenie jest oceniane jako true, element jest renderowany; w przeciwnym razie nie jest uwzględniany w DOM. Oto podstawowy przykład:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

W tym przykładzie element akapitu jest renderowany tylko wtedy, gdy isVisible jest true. Kliknięcie przycisku przełącza wartość isVisible i w ten sposób kontroluje widoczność akapitu.

Dyrektywa v-else

Dyrektywa v-else może być używana w połączeniu z v-if, aby określić alternatywny blok treści do wyświetlenia, gdy warunek v-if jest false. Oto przykład:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

W tym przykładzie, gdy isVisible jest true, wyświetlany jest pierwszy akapit. Gdy isVisible jest false, wyświetlany jest drugi akapit.

Dyrektywa v-show

Dyrektywa v-show umożliwia również warunkowe renderowanie elementów, ale różni się od v-if tym, że przełącza widoczność elementu za pomocą właściwości CSS display zamiast dodawać ją lub usuwać z DOM. Może to być bardziej wydajne, jeśli często musisz przełączać widoczność elementu.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

W tym przykładzie dyrektywa v-show kontroluje widoczność akapitu, ustawiając jego właściwość display. Element pozostaje w DOM, ale jest ukryty lub wyświetlany na podstawie wartości isVisible.

Dyrektywa v-else-if

Dyrektywa v-else-if służy do tworzenia łańcucha "else if" w logice renderowania warunkowego. Umożliwia określenie dodatkowych warunków do oceny, czy poprzedni warunek v-if nie jest spełniony. Oto przykład:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

W tym przykładzie wyświetlana zawartość zależy od wartości właściwości status. Dyrektywy v-if, v-else-if i v-else służą do obsługi różnych stanów.

Wniosek

Renderowanie warunkowe jest kluczowym aspektem tworzenia interaktywnych i dynamicznych aplikacji z Vue.js. Używając dyrektyw takich jak v-if, v-else, v-show i v-else-if, możesz kontrolować wyświetlanie elementów na podstawie różnych warunków. Opanowanie tych dyrektyw pomoże Ci tworzyć bardziej responsywne i przyjazne dla użytkownika interfejsy w aplikacjach Vue.js.