Understanding Vue3 Class and Style bindings with examples.

One of the key features of Vue is its ability to bind classes and styles to elements in the DOM. This allows developers to easily manipulate the look and feel of their application based on the component’s state. In this article, we will take a closer look at how class and style bindings work in Vue 3, and explore some best practices for using them in your projects.

First, let’s define the terms “class” and “style” bindings. In Vue, a class binding is used to apply one or more CSS classes to an element based on a condition. For example, you might want to apply a “highlighted” class to a button when it is clicked. A style binding, on the other hand, is used to apply inline styles to an element. This can be useful for things like setting the width or height of an element based on a component’s state.

In Vue 3, class and style bindings are defined using the v-bind directive. The v-bind directive can be used to bind a value to an element’s class or style attribute. For example, to bind a class to an element, you would use the following syntax:

<template>
  <div v-bind:class="{ highlighted: isHighlighted }"></div>
</template>

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

In this example, the v-bind:class directive is used to bind the “highlighted” class to the div element. The value passed to the directive is an object, where the keys are the class names and the values are the conditions that determine whether or not the class should be applied. In this case, the “highlighted” class will be applied to the div element when the isHighlighted data property is set to true.

The same thing can be done with the v-bind:style directive. For example, to bind a style to an element, you would use the following syntax:

<template>
  <div v-bind:style="{ width: width + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      width: 100
    }
  }
}
</script>

In this example, the v-bind:style directive is used to bind the “width” style to the div element. The value passed to the directive is an object, where the keys are the style properties and the values are the expressions that determine the value of the style. In this case, the “width” style will be set to the value of the width data property, plus the string “px”.

You can also bind multiple classes or styles to an element using the v-bind directive. For example, to bind multiple classes to an element, you would use the following syntax:

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

<script>
export default {
  data() {
    return {
      isAcive: false,
      hasError : true,
    }
  }
}

The Vue3 guide on class bindings: https://vuejs.org/guide/essentials/class-and-style.html

Recreate Class and Style binding in vanilla Javascript

The process is slightly different than using the v-bind directive, but the end result is the same.

To create a class binding using vanilla JavaScript, you would first need to select the element you want to bind the class to. This can be done using the querySelector() or getElementById() method. Once you have the element, you can use the classList property to add or remove classes.

Here’s an example of how to create a class binding using vanilla JavaScript:

<template>
  <div id="my-element"></div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false
    }
  },
  mounted() {
    const element = document.querySelector('#my-element');

    this.$watch('isHighlighted', (newValue) => {
      if (newValue) {
        element.classList.add('highlighted');
      } else {
        element.classList.remove('highlighted');
      }
    });
  }
}
</script>

In this example, the mounted lifecycle hook is used to select the element with the id “my-element” and set the width style to the value of the width data property, plus the string “px”.

It is worth noting that using the v-bind directive is more powerful and flexible than using vanilla JavaScript, since it allows you to declaratively bind classes and styles based on component’s state. Additionally, it is also more readable, maintainable and less error prone. However, it’s good to have the knowledge of creating class and style bindings using vanilla javascript, as it allows you to understand the underlying mechanism behind the vue’s directives.