Fullstack Dev

Podmíněné vykreslování a direktivy

Jednou z klíčových vlastností Vue jsou jeho výkonné direktivy, které zjednodušují úkoly, jako je podmíněné vykreslování. Pokud znáte frameworky jako Angular nebo Laravel, mohou vám direktivy Vue připadat povědomé.

Tento článek se zaměřuje na podmíněné vykreslování ve Vue, konkrétně na v-if, v-else, v-else-if a v-show.

Nastavení Vue aplikace

Pro začátek budete potřebovat základní nastavení Vue.js. Pro tuto demonstraci použijeme Vue 3 a Composition API. Zde je jednoduchý příklad:

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutoriál</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <!-- Obsah bude vložen sem -->
</div>
<script>
  const { createApp } = Vue;

  createApp({
      // Nastavení Vue půjde sem
  }).mount('#app');
</script>
</body>
</html>

Použití v-if, v-else a v-else-if

Podmíněné vykreslování ve Vue je podobné podmínkám if, else if a else v JavaScriptu. Vue používá direktivu v-if k vyhodnocení podmínek a vykreslení DOM prvků na základě výsledku.

Příklad: Kontrola stavu uživatele

Zde je příklad, kde kontrolujeme, zda je uživatel online nebo offline:

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutoriál</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <h1>{{ user.name }}</h1>
  <span>Status: {{ user.status }}</span>
  <span v-if="user.status === 'Online'">🟢</span>
  <span v-else>🔴</span>
  <br>
  <br>
  <button @click="toggleStatus">Změnit status</button>
</div>
<script>
  const { createApp, reactive } = Vue;

  createApp({
      setup() {
          const user = reactive({
              name: 'Petr',
              status: 'Online',
          });

          function toggleStatus() {
              user.status = user.status === 'Offline' ? 'Online' : 'Offline';
          }

          return {
              user,
              toggleStatus,
          };
      },
  }).mount('#app');
</script>
</body>
</html>

Na začátku se zobrazí status “Online” se zeleným tlačítkem. Když kliknete na tlačítko “Změnit status”, status se bude přepínat mezi červeným a zeleným tlačítkem. Pokud je status “Online”, zobrazí se zelené tlačítko, jinak červené tlačítko.

Použití v-else-if

Můžete přidat více podmínek pomocí v-else-if. Například:

<div id="app">
<span>Status: {{ user.status }}</span>
<span v-if="user.status === 'Online'">🟢</span>
<span v-else>🔴</span>
</div>

Zde vyhodnocujeme více podmínek:

• Pokud je uživatel “Online”, zobrazí se zelené tlačítko

• Jinak se zobrazí červené tlačítko

Můžeme jít dál a použít v-if, v-else-if a v-else. To je podobné jako if, else if a else v programovacích jazycích. Tímto způsobem náhodně vybíráme status z “Online”, “Offline” a “Unknown”.

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Tutoriál</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <h1>{{ user.name }}</h1>
  <span>Status: {{ user.status }}</span>
  <span v-if="user.status === 'Online'">🟢</span>
  <span v-else-if="user.status === 'Offline'">🔴</span>
  <span v-else>⚫</span>
  <br>
  <br>
  <button @click="toggleStatus">Změnit status</button>
</div>
<script>
  const { createApp, reactive } = Vue;

  createApp({
      setup() {
          const user = reactive({
              name: 'Petr',
              status: 'Online',
          });

          const statuses = ['Online', 'Offline', 'Unknown'];

          function toggleStatus() {
              const randomIndex = Math.floor(Math.random() * statuses.length);
              user.status = statuses[randomIndex];
          }

          return {
              user,
              toggleStatus,
          };
      },
  }).mount('#app');
</script>
</body>
</html>

Důležitá poznámka

Vue vyžaduje, aby v-if, v-else a v-else-if byly přiléhavé v DOM. Vložení nesouvisejících elementů mezi ně může narušit logiku a vést k chybám.

Použití v-show

Další direktiva, v-show, nabízí podobný výsledek jako v-if, ale funguje jinak. Zatímco v-if odstraňuje prvky z DOM, pokud nejsou splněny podmínky, v-show přepíná jejich viditelnost pomocí CSS vlastnosti display: none.

Příklad:

<div id="app">
<p v-show="true">Zobrazit tuto zprávu</p>
<p v-show="false">Nezobrazovat tuto zprávu</p>
</div>

• První p tag bude vždy viditelný

• Druhý p tag bude v DOM, ale zůstane skrytý

Klíčový rozdíl:

Používejte v-show, pokud často přepínáte viditelnost, a v-if, pokud je potřeba prvky dynamicky přidávat nebo odebírat pro optimalizaci výkonu.

Video

Nerad čteš, tak mrkni na video 👇

Build-In Directives Iterace: Od základních polí po složité kolekce