0 Tage Serie
javascript / beginner
Snippet

Skript-Variablen in CSS verwenden

Vue ermöglicht es Ihnen, CSS-Werte direkt an reaktive Variablen in Ihrem Skript-Bereich zu binden, indem Sie die Funktion v-bind() innerhalb von CSS verwenden.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script setup>
const themeColor = 'blue';
</script>
<style scoped>
.text {
color: v-bind(themeColor);
}
</style>
vue
Erklärung
1
const themeColor = 'blue'
Definieren einer Standard-Variable im Script-Setup.
2
v-bind(themeColor)
Binden des CSS-Eigenschaftswerts an die Skript-Variable.