18. Binding classes

We can bind a class so it will be either bound or not depending on a boolean value.

Here the class is called sec. It will apply to either of the h2 elements based on the value bool which can be toggled by the button.

This is App.vue file:

<template>
  <div>
    <button @click="bool=!bool">Change Class</button>
    <h2 :class="{sec:bool}">Secret 1</h2>
    <h2 :class="{sec:!bool}">Secret 2</h2>
  </div>
</template>

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

<style>
.sec {
  color: green;
  background-color: pink;
}
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is the output: