Intermediate LevelVue JS
How does v-bind() in <style scoped> bind reactive Vue variables directly to CSS values?
❓ Interview Prompt: Explain CSS v-bind() function in Vue 3 <style>, dynamic CSS custom properties, and theme switching.
Vue 3 allows binding reactive JavaScript state directly inside CSS rules in '<style>' blocks using the 'v-bind()' CSS function.
How it Works Under the Hood:
Vue compiles 'v-bind(variableName)' into an inline CSS custom property (e.g. '--data-v-123-themeColor') attached to the component's root element. Whenever the ref updates in JavaScript, Vue updates the CSS custom property reactively!
Code Implementation Example
html
<script setup>
import { ref } from 'vue';
const themeColor = ref('#3b82f6');
</script>
<template>
<div class="card">
<button @click="themeColor = '#ef4444'">Change Theme Red</button>
</div>
</template>
<style scoped>
.card {
/* Binds JS ref directly to CSS background property! */
background-color: v-bind(themeColor);
padding: 20px;
}
</style>💡Binding reactive JavaScript refs directly to CSS rules using v-bind().
🎯 Interview Key Takeaway
Use v-bind(variable) inside <style> blocks to bind reactive JavaScript state directly to CSS properties.
#v-bind CSS#Styles#Vue 3#Intermediate
Back to all Vue JS Questions→