Dyrektywy Warunkowe

Jak systemy NOVA LAB podejmują decyzje oparte na odczytach sensorów, Vue pozwala kontrolować, co pojawi się w interfejsie.

v-if, v-else-if, v-else

1<template>
2  <div class="system-monitor" style="background: #0a0e27; color: #00ff88;">
3    <div v-if="systemType === 'oxygen'">
4      ⚗️ Generator tlenu - System aktywny
5    </div>
6    <div v-else-if="systemType === 'water'">
7      💧 Recykling wody - System aktywny
8    </div>
9    <div v-else-if="systemType === 'power'">
10      ⚡ Reaktor plazmowy - System aktywny
11    </div>
12    <div v-else>
13      ❓ Nieznany system
14    </div>
15
16    <!-- Na grupie elementów -->
17    <template v-if="showDetails">
18      <h2 style="color: #00b4d8;">{{ module.name }}</h2>
19      <p>{{ module.description }}</p>
20      <span>Status: {{ module.status }}</span>
21    </template>
22  </div>
23</template>
24
25<script setup>
26import { ref, reactive } from 'vue'
27
28const systemType = ref('oxygen')
29const showDetails = ref(true)
30
31const module = reactive({
32  name: 'Life Support Alpha',
33  description: 'Primary oxygen generation system',
34  status: 'ONLINE'
35})
36</script>

v-show

1<template>
2  <div class="alert-panel">
3    <!-- v-show - zawsze renderowany, tylko CSS display: none -->
4    <div v-show="isVisible" class="alert-message"
5         style="background: #ff4444; color: white; padding: 1rem;">
6      ⚠️ CRITICAL ALERT: Oxygen levels dropping!
7    </div>
8  </div>
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const isVisible = ref(true)
15</script>

v-if vs v-show

| Cecha | v-if | v-show | |-------|------|--------| | Renderowanie | Warunkowe | Zawsze | | Koszt początkowy | Niski | Wyższy | | Koszt przełączania | Wyższy | Niski | | Użycie | Rzadkie zmiany | Częste przełączanie (np. alerty) |

Praktyczny Przykład

1<template>
2  <div class="mission-dashboard" style="background: #0a0e27; padding: 1rem;">
3    <div class="system-filter">
4      <button @click="filter = 'all'" class="btn-filter">Wszystkie</button>
5      <button @click="filter = 'life-support'" class="btn-filter">Life Support</button>
6      <button @click="filter = 'power'" class="btn-filter">Energetyka</button>
7    </div>
8
9    <div v-if="filter === 'all'" class="systems-grid">
10      Wszystkie systemy...
11    </div>
12    <div v-else-if="filter === 'life-support'" class="systems-grid">
13      Tylko systemy podtrzymywania życia...
14    </div>
15    <div v-else class="systems-grid">
16      Tylko systemy energetyczne...
17    </div>
18
19    <!-- Loading state -->
20    <div v-if="isLoading" class="loader" style="color: #00b4d8;">
21      🔄 Ładowanie danych z sensorów...
22    </div>
23    <div v-else-if="error" class="error" style="color: #ff4444;">
24      ❌ {{ error }}
25    </div>
26    <div v-else class="content" style="color: #00ff88;">
27      ✅ {{ data }}
28    </div>
29  </div>
30</template>
31
32<script setup>
33import { ref } from 'vue'
34
35const filter = ref('all')
36const isLoading = ref(false)
37const error = ref(null)
38const data = ref('All systems nominal')
39</script>