Content:
2. Mastering Vue 3 - Part 2 [Benefits of using Vue 3 for web development]
3. Mastering Vue 3 - Part 3 [Template syntax in Vue 3]
4. Mastering Vue 3 - Part 4 [Reactivity Fundamentals]
5. Mastering Vue 3 - Part 5 [Class and Style Bindings]
6. Mastering Vue 3 - Part 6 [Lifecycle Hooks]
7. Mastering Vue 3 - Part 7 [Understanding components in Vue 3
]
8. Mastering Vue 3 - Part 8 [Installing Vue project and file structure]
9. Mastering Vue 3 - Part 9 [Vue Router in Vue 3]
10. Mastering Vue 3 - Part 10 [Animation in Vue 3]
11. Mastering Vue 3 - Part 11 [State Management with Pinia]
12. Mastering Vue 3 - Part 12 [Teleport in Vue 3]
13. Mastering Vue 3 - Part 13 [Working with API Calls ]
14. Mastering Vue 3 - Part 14 [Forms and Form Validation ]
Class and Style Bindings
In Vue 3, class and style bindings allow you to dynamically apply CSS classes and inline styles to elements based on data or component state. This helps you create dynamic and responsive UIs by conditionally applying styles.
Class Bindings
Class bindings allow you to conditionally apply CSS classes to elements. You can use the v-bind:class
directive or the shorthand :class
to bind a class dynamically.
<template>
<div>
<p :class="{ 'red': isError, 'bold': isBold }">Some text</p>
</div>
</template>
In this example, the isError
and isBold
variables determine whether the red
and bold
classes should be applied to the <p>
element, respectively. If isError
is true
, the red
class will be applied. If isBold
is true
, the bold
class will be applied.
You can also use an object syntax to conditionally apply classes based on the truthiness of properties:
<template>
<div>
<p :class="classObject">Some text</p>
</div>
</template>
<script>
export default {
data() {
return {
classObject: {
'red': true,
'bold': false
}
};
}
};
</script>
In this example, the classObject
data property defines the classes to be applied. The red
class is applied because its value is true
, while the bold
class is not applied because its value is false
.
Style Bindings
Style bindings allow you to apply inline styles to elements dynamically. You can use the v-bind:style
directive or the shorthand :style
to bind styles.
<template>
<div>
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">Some text</p>
</div>
</template>
In this example, the textColor
and fontSize
variables determine the color and font size of the text, respectively. The color
style is bound to the textColor
variable, and the fontSize
style is bound to the fontSize
variable.
You can also bind styles directly to a style object in your component’s data:
<template>
<div>
<p :style="textStyle">Some text</p>
</div>
</template>
<script>
export default {
data() {
return {
textStyle: {
color: 'red',
fontSize: '20px'
}
}
}
}
</script>
In this example, the textStyle
data property defines the styles to be applied. The text will be displayed in red with a font size of 20 pixels.
Both class and style bindings can be combined and used together within the template.
These class and style bindings in Vue 3 provide a flexible way to apply dynamic styles and classes based on component data or state, allowing you to create more interactive and responsive user interfaces.
Top comments (0)