Class and Style Binding

Just as NOVA LAB systems adapt holograms to the situation, Vue allows you to dynamically manage interface styles.

Class Binding - Object Syntax

1<template>
2  <div class="status-panel" style="background: #0a0e27;">
3    <div :class="{ active: isOnline, 'status-critical': hasCriticalError }">
4      System Status Display
5    </div>
6
7    <!-- With computed -->
8    <div :class="statusClasses">Computed Status</div>
9  </div>
10</template>
11
12<script setup>
13import { ref, computed } from 'vue'
14
15const isOnline = ref(true)
16const hasCriticalError = ref(false)
17
18const statusClasses = computed(() => ({
19  active: isOnline.value,
20  'status-critical': hasCriticalError.value,
21  'neon-glow': isOnline.value
22}))
23</script>
24
25<style>
26.active {
27  color: #00ff88;
28  border-left: 3px solid #00ff88;
29}
30.status-critical {
31  color: #ff4444;
32  animation: pulse 1s infinite;
33}
34.neon-glow {
35  box-shadow: 0 0 10px #00ff88;
36}
37@keyframes pulse {
38  0%, 100% { opacity: 1; }
39  50% { opacity: 0.5; }
40}
41</style>

Class Binding - Array Syntax

1<template>
2  <div class="reactor-display">
3    <div :class="[activeClass, statusClass]">
4      Array syntax
5    </div>
6
7    <!-- With condition -->
8    <div :class="[isOnline ? 'online' : 'offline', statusClass]">
9      Conditional class
10    </div>
11
12    <!-- Mixed -->
13    <div :class="[{ active: isOnline }, statusClass]">
14      Mixed
15    </div>
16  </div>
17</template>
18
19<script setup>
20import { ref } from 'vue'
21
22const activeClass = ref('reactor-active')
23const statusClass = ref('status-nominal')
24const isOnline = ref(true)
25</script>

Inline Style Binding

1<template>
2  <div class="hologram-container">
3    <!-- Object syntax -->
4    <div :style="{ color: neonColor, fontSize: fontSize + 'px' }">
5      Inline styles
6    </div>
7
8    <!-- With object -->
9    <div :style="panelStyle">Style object</div>
10
11    <!-- Array syntax - multiple objects -->
12    <div :style="[baseStyles, highlightStyles]">
13      Multiple style objects
14    </div>
15  </div>
16</template>
17
18<script setup>
19import { ref, reactive } from 'vue'
20
21const neonColor = ref('#00ff88')
22const fontSize = ref(18)
23
24const panelStyle = reactive({
25  color: '#00b4d8',
26  backgroundColor: '#0a0e27',
27  padding: '1rem',
28  borderRadius: '8px',
29  border: '1px solid #00ff88'
30})
31
32const baseStyles = { color: '#00b4d8' }
33const highlightStyles = { fontSize: '20px', textShadow: '0 0 10px #00b4d8' }
34</script>

Auto-prefixing

Vue automatically adds vendor prefixes:

1<div :style="{ transform: 'rotateX(45deg)' }">
2  <!-- Will automatically add -webkit-transform etc. -->
3</div>