dynamic class vue code example
Example 1: inline style vue
<div :style="{color: ' #f67e7e'}" ></div>
Example 2: bind style with condition in vue
<figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">
Example 3: dynamically bind class name in vue
<template>
<span
class="description"
:class="[
fontTheme,
darkMode ? 'dark-theme' : 'light-theme',
]"
>
This is how you add dynamic classes in Vue.
</span>
</template>
Example 4: vue toggle class
<template>
<div>
<div
class="staticClass"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div
v-bind:class="[isActive ? activeClass : '', errorClass]"
></div>
</div>
</template>
<script>
export default {
data() {
isActive: true,
hasError: false,
activeClass: 'active',
errorClass: 'text-danger',
}
}
</script>
Example 5: vue conditional class
<div :class="{ 'prop-name': boolVar }"></div>
Example 6: vue class binding
<div v-bind:class="{ active: isActive }"></div>