Conditional Directives

Just as NOVA LAB systems make decisions based on sensor readings, Vue allows you to control what appears in the interface.

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      ⚗️ Oxygen generator - System active
5    </div>
6    <div v-else-if="systemType === 'water'">
7      💧 Water recycling - System active
8    </div>
9    <div v-else-if="systemType === 'power'">
10      ⚡ Plasma reactor - System active
11    </div>
12    <div v-else>
13      ❓ Unknown system
14    </div>
15
16    <!-- On a group of elements -->
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 - always rendered, just 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

| Feature | v-if | v-show | |-------|------|--------| | Rendering | Conditional | Always | | Initial cost | Low | Higher | | Toggle cost | Higher | Low | | Use case | Rare changes | Frequent toggling (e.g., alerts) |

Practical Example

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">All</button>
5      <button @click="filter = 'life-support'" class="btn-filter">Life Support</button>
6      <button @click="filter = 'power'" class="btn-filter">Power</button>
7    </div>
8
9    <div v-if="filter === 'all'" class="systems-grid">
10      All systems...
11    </div>
12    <div v-else-if="filter === 'life-support'" class="systems-grid">
13      Life support systems only...
14    </div>
15    <div v-else class="systems-grid">
16      Power systems only...
17    </div>
18
19    <!-- Loading state -->
20    <div v-if="isLoading" class="loader" style="color: #00b4d8;">
21      🔄 Loading sensor data...
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>