Vue CSS Binding
Dynamic styling with Vue
🎨 What is CSS Binding?
Vue allows you to dynamically bind CSS classes and inline styles to elements. This makes it easy to change appearance based on data, creating interactive and responsive interfaces.
<div id="app">
<p :class="{ active: isActive }">Dynamic Class</p>
<p :style="{ color: textColor }">Dynamic Style</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isActive: true,
textColor: 'blue'
}
}
}).mount('#app')
</script>
CSS Binding Methods
Object Syntax
Bind classes using object notation
:class="{ active: isActive }"Array Syntax
Bind multiple classes with arrays
:class="[class1, class2]"Inline Styles
Bind styles directly to elements
:style="{ color: myColor }"Multiple Styles
Combine multiple style objects
:style="[style1, style2]"🔹 Class Binding - Object Syntax
Use object syntax to toggle classes based on data properties. The class is applied when the property is truthy.
<style>
.active { color: green; font-weight: bold; }
.error { color: red; background: #ffe6e6; padding: 5px; }
</style>
<div id="app">
<p :class="{ active: isActive }">This text is active</p>
<p :class="{ error: hasError }">This has an error</p>
<p :class="{ active: isActive, error: hasError }">Multiple classes</p>
<button @click="isActive = !isActive">Toggle Active</button>
<button @click="hasError = !hasError">Toggle Error</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isActive: true,
hasError: false
}
}
}).mount('#app')
</script>Output:
This text is active
This has an error
Multiple classes
🔹 Class Binding - Array Syntax
Array syntax lets you apply multiple classes from data properties. You can also mix static and dynamic classes.
<style>
.text-large { font-size: 20px; }
.text-bold { font-weight: bold; }
.text-blue { color: blue; }
</style>
<div id="app">
<p :class="[largeClass, boldClass]">Large and Bold</p>
<p :class="[blueClass, { 'text-bold': isBold }]">Blue with conditional bold</p>
<button @click="isBold = !isBold">Toggle Bold</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
largeClass: 'text-large',
boldClass: 'text-bold',
blueClass: 'text-blue',
isBold: false
}
}
}).mount('#app')
</script>Output:
Large and Bold
Blue with conditional bold
🔹 Inline Style Binding - Object Syntax
Bind inline styles using JavaScript object notation. CSS property names can be camelCase or kebab-case (in quotes).
<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Styled Text
</p>
<p :style="{
color: activeColor,
backgroundColor: bgColor,
padding: '10px',
borderRadius: '5px'
}">
Multiple Styles
</p>
<button @click="textColor = 'red'">Red</button>
<button @click="textColor = 'blue'">Blue</button>
<button @click="fontSize += 2">Increase Size</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
textColor: 'green',
fontSize: 16,
activeColor: 'white',
bgColor: '#42b883'
}
}
}).mount('#app')
</script>Output:
Styled Text
Multiple Styles
🔹 Inline Style Binding - Array Syntax
Combine multiple style objects using array syntax. This is useful for applying base styles and conditional styles together.
<div id="app">
<p :style="[baseStyles, activeStyles]">
Combined Styles
</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
baseStyles: {
fontSize: '18px',
fontWeight: 'bold'
},
activeStyles: {
color: 'purple',
textDecoration: 'underline'
}
}
}
}).mount('#app')
</script>Output:
Combined Styles
🔹 Practical Example: Theme Switcher
Here's a practical example combining class and style bindings to create a simple theme switcher:
<style>
.light-theme { background: white; color: black; }
.dark-theme { background: #333; color: white; }
.theme-box { padding: 20px; border-radius: 8px; }
</style>
<div id="app">
<div :class="['theme-box', isDark ? 'dark-theme' : 'light-theme']">
<h3>{{ isDark ? 'Dark' : 'Light' }} Theme</h3>
<p>This is a themed box</p>
<button @click="isDark = !isDark">
Switch to {{ isDark ? 'Light' : 'Dark' }} Theme
</button>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isDark: false
}
}
}).mount('#app')
</script>Output:
Light Theme
This is a themed box