javascript / expert
Snippet
Reaktive CSS-Variablen-Injektion mit v-bind
Vue ermöglicht die direkte Bindung von JavaScript-State an CSS mittels v-bind() innerhalb von <style>-Blöcken. Unter der Haube generiert Vue eindeutige CSS-Variablen auf dem Wurzelelement der Komponente und aktualisiert diese, sobald sich der reaktive State ändert. Dies schafft eine Brücke zwischen Logik und Darstellung bei hoher Performance, da Stil-Neuberechnungen effizient von der CSS-Engine des Browsers gehandhabt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup>import { ref } from 'vue';const themeColor = ref('#3498db');const spacing = ref('20px');</script><template><div class="dynamic-container">Content</div></template><style scoped>.dynamic-container {/* Vue compiles this into a CSS variable linked to the JS ref */background-color: v-bind(themeColor);padding: v-bind('spacing');transition: background-color 0.3s ease;}</style>
vue
Erklärung
1
v-bind(themeColor)
Bindet die reaktive 'themeColor' Ref an eine dynamisch generierte CSS Custom Property.
2
v-bind('spacing')
String-Literale können ebenfalls verwendet werden, was komplexere Ausdrücke ermöglicht.