javascript / intermediate
Snippet
Dynamisches CSS mit v-bind() in Styles
Die Funktion v-bind() in <style>-Blöcken ermöglicht es Ihnen, CSS-Eigenschaften direkt mit reaktiven Variablen in Ihrem Skript zu verknüpfen. Vue übernimmt automatisch die Aktualisierung der CSS-Variablen, sobald sich der reaktive Status ändert.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>import { ref } from 'vue';const color = ref('#ff0000');const fontSize = ref('16px');</script><template><span class="dynamic-text">Interactive Styles</span></template><style scoped>.dynamic-text {color: v-bind(color);font-size: v-bind(fontSize);}</style>
vue
Erklärung
1
color: v-bind(color);
Bindet die CSS-Eigenschaft 'color' an die im Script-Setup definierte 'color'-Ref.