VueJs - Dynamic Class Binding

In this tutorial, we will learn about dynamic class binding in Vue JS. This is a very important concept to understand when working with Vue.js as it can be used to dynamically add classes to any element on the page.

• What is dynamic class binding?
• How to use data and methods for dynamic class binding?
• How to use computed properties for dynamic class binding?

Toggle class

The p element has text-danger class only when hasError is true, when hasError changes the p element will automatically rerender.

<template>
    <div>
        <p :class="{ 'text-danger': hasError }">Sentence 1</p>
        <button @click="() => hasError = !hasError">Toggle Has Error</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            hasError: true
        }
    }
}
</script>

<style scoped>
    .text-danger {
        color: red;
    }
</style>

Multiple toggle class

<p :class="{ 'text-danger': hasError, 'bg-green': bgSuccess }">Sentence 2</p>

Class as a data object property

<template>
    <div>
      <p :class="classObject">Sentence</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            classObject: { 'text-danger': true, 'bg-green': true }
        }
    }
}
</script>

<style scoped>
    .text-danger {
        color: red;
    }
    .bg-green {
        background-color: green;
    }
</style>

Class binding with the ternary operator

<template>
    <div>
        <p :class="hasError ? 'text-danger' : 'text-success'">Sentence 1</p>
        <button @click="() => hasError = !hasError">Toggle Has Error</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            hasError: false
        }
    }
}
</script>

<style scoped>
    .text-success {
        color: green;
    }
    .text-danger {
        color: red;
    }
</style>

Using class as variable

<template>
    <div>
        <p :class="textClass">Sentence 1</p>
        <button @click="updateClass">Update Text Class</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            textClass: 'text-danger'
        }
    },
    methods: {
        updateClass() {
            this.textClass = this.textClass === 'text-danger' ? 'text-success' : 'text-danger';
        }
    }
}
</script>

<style scoped>
    .text-success {
        color: green;
    }
    .text-danger {
        color: red;
    }
</style>

Use computed property for class binding

<template>
    <div>
        <p :class="sentenceClass">Sentence 1</p>
        <button @click="updateClass">Update Text Class</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            textDanger: false
        }
    },
    methods: {
        updateClass() {
            this.textDanger = !this.textDanger;
        }
    },
    computed: {
        sentenceClass() {
            return this.textDanger ? 'text-danger' : 'text-success';
        }
    }
}
</script>

<style scoped>
    .text-success {
        color: green;
    }
    .text-danger {
        color: red;
    }
</style>