The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Class and Style Bindings

Next ►
►

In this section, we will explore how to dynamically bind classes and styles to elements in Vue.js. This is a powerful feature that allows you to conditionally apply CSS classes and inline styles based on your application's state.

Key Concepts

  1. Class Bindings: Dynamically bind one or more classes to an element.
  2. Style Bindings: Dynamically bind inline styles to an element.

Class Bindings

Binding HTML Classes

Vue.js allows you to bind HTML classes to elements using the v-bind:class directive or the shorthand :class.

Object Syntax

You can bind classes using an object where the keys are the class names and the values are boolean expressions.

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

In the above example:

  • active class will be applied if isActive is true.
  • text-danger class will be applied if hasError is true.

Array Syntax

You can also bind classes using an array of class names.

<div v-bind:class="[isActive ? 'active' : '', errorClass]"></div>

In the above example:

  • active class will be applied if isActive is true.
  • errorClass will be applied regardless of its value.

Example

<template>
  <div>
    <button @click="toggleActive">Toggle Active</button>
    <div :class="{ active: isActive, 'text-danger': hasError }">
      This is a dynamic class binding example.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      hasError: true
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

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

Style Bindings

Binding Inline Styles

Vue.js allows you to bind inline styles to elements using the v-bind:style directive or the shorthand :style.

Object Syntax

You can bind styles using an object where the keys are the CSS property names and the values are the expressions.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

In the above example:

  • color will be set to the value of activeColor.
  • fontSize will be set to the value of fontSize followed by 'px'.

Array Syntax

You can also bind styles using an array of style objects.

<div v-bind:style="[baseStyles, overridingStyles]"></div>

In the above example:

  • baseStyles and overridingStyles are objects containing CSS properties.

Example

<template>
  <div>
    <button @click="toggleActive">Toggle Active</button>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
      This is a dynamic style binding example.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'blue',
      fontSize: 14
    };
  },
  methods: {
    toggleActive() {
      this.activeColor = this.activeColor === 'blue' ? 'green' : 'blue';
      this.fontSize = this.fontSize === 14 ? 18 : 14;
    }
  }
};
</script>

Practical Exercise

Exercise: Dynamic Class and Style Binding

Create a Vue component that toggles between two different styles and classes when a button is clicked.

Requirements:

  1. Create a button that toggles the isActive state.
  2. Bind a class to a div that changes based on the isActive state.
  3. Bind an inline style to the same div that changes based on the isActive state.

Solution:

<template>
  <div>
    <button @click="toggleActive">Toggle Active</button>
    <div :class="{ active: isActive }" :style="{ color: isActive ? 'green' : 'red', fontSize: isActive ? '20px' : '14px' }">
      This is a dynamic class and style binding example.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  font-weight: bold;
}
</style>

Common Mistakes and Tips

  • Boolean Expressions: Ensure that the values in the object syntax for class bindings are boolean expressions.
  • CSS Property Names: Use camelCase for CSS property names in the object syntax for style bindings.
  • Array Syntax: When using array syntax, ensure that each item in the array is a valid class name or style object.

Conclusion

In this section, we learned how to dynamically bind classes and styles to elements in Vue.js using both object and array syntax. These bindings allow for more interactive and responsive user interfaces by conditionally applying styles based on the application's state. In the next section, we will explore conditional rendering in Vue.js.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved