How to bind a class with v-if state in VueJS.
July 28, 2020
1 min

This little tweak will allow you to bind a certain css class to a VueJS component depending on state or props. Inactive is a style class that change the aspect of your component and can be tweaked using a props called inactive in this example :

  <p :class="{ inactive: item.status }">I can be inactive</p>

  export default {
    name: 'exempleComponent',
    props: {
      inactive: {
        type: Boolean,
        default: false

  .inactive {
    color: red;



Related Posts

How to set Type with Typescript in Vuejs Data.
March 04, 2021
1 min
© 2023, All Rights Reserved.

Quick Links

Contact Us

Social Media