How to Toggle CSS Class in Vue.js

In this article, I’m going to show how to toggle CSS class in Vue. Let’s see the example:


We can toggle a class in the list conditionally. Here’s the syntax:

<div :class="[isActive ? activeClass : '', anotherClass]"></div>

An Example

Let’s have a look at an example:

    <p :class="[ isRed ? 'text-red' : 'text-light' ]">
      Dummy Text
    <button @click="switchColor">Switch</button>

export default {
  data() {
    return {
      isRed: false
  methods: {
    switchColor() {
        this.isRed = false
        this.isRed = true

<!-- styles -->
<style scoped>
  .text-red {
    color: rgb(190, 3, 3);
  .text-light {
    color: rgb(0, 0, 0);

That’s it. Thanks for reading.

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.