HomeContact
VueJS
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 :

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

<script>
  export default {
    name: 'exempleComponent',
    props: {
      inactive: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style>
  .inactive {
    color: red;
  }
</style>

Tags

javascriptvuejs

Related Posts

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

Quick Links

Contact Us

Social Media