javascript / intermediate
Snippet
Dynamic CSS with v-bind() in Styles
The v-bind() function inside <style> blocks allows you to link CSS properties directly to reactive variables in your script. Vue automatically handles the CSS variable updates whenever the reactive state changes.
snippet.js
javascript
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
Breakdown
1
color: v-bind(color);
Binds the CSS color property to the 'color' ref defined in script setup.