Use class binding in Vue to dynamically control element class through objects, arrays, or hybrid methods. When using the :class directive, 1. Adding control classes in the object form key value (such as { active: isActive }); 2. Multiple class names can be bound in the array form (such as [baseClass, sizeClass]); 3. It can mix static classes, objects and ternary expressions (such as ['static-class', { active: isActive }, isSmall ? 'small-text' : '']); 4. Complex logic is recommended to be encapsulated into computed attributes for unified management to improve template clarity and maintenance.

Using Class Binding in Vue is actually very simple. The core is to dynamically control the class of HTML elements through the :class directive. You can dynamically add and remove certain style classes based on the status or data of the component, which is very useful for implementing interactive effects and state feedback.

Basic syntax: object form binding class

The most common way is to use an object to pass it to :class , the key is the class name and the value is a boolean value, indicating whether the class is applied.

 <template>
  <div :class="{ active: isActive, &#39;text-danger&#39;: hasError }">
    Dynamic class example</div>
</template>

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

In this example, if isActive is true , the active class will be added; if hasError is true , text-danger class will be added. This approach is suitable for handling switching between multiple classes.

Array form: bind multiple class names

If you want to bind multiple classes at the same time, you can also use array form:

 <template>
  <div :class="[baseClass, sizeClass]">
    Multiple class name binding</div>
</template>

<script>
export default {
  data() {
    return {
      baseClass: &#39;btn&#39;,
      sizeClass: &#39;btn-lg&#39;
    };
  }
};
</script>

The rendering result will be <div class="btn btn-lg"> . This writing method is suitable for you to splice some basic class names and dynamic class names.

• If you want to make conditional judgments in the array:
  • Can nest objects: :class="[baseClass, { 'is-large': isLarge }]"

Mix objects and arrays

Sometimes you will encounter more complex needs, such as mixing static classes, dynamic objects and arrays together. Vue's class binding also supports this combination.

 <template>
  <div :class="[
    &#39;static-class&#39;,
    { active: isActive },
    isSmall ? &#39;small-text&#39; : &#39;&#39;
  ]">
    Mixed class binding</div>
</template>

In the example above:

• 'static-class' is fixedly added;
• { active: isActive } is based on the data to decide whether to add;
• isSmall ? 'small-text' : '' is a ternary expression, which can also be written as more complex logic.

Tips: Encapsulate into compute properties

If your class binding logic is relatively complicated, it is recommended to put it in the calculation properties to manage it uniformly, so that the template will be clearer.

 <template>
  <div :class="buttonClasses">
    Button</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false
    };
  },
  computed: {
    buttonClasses() {
      return {
        active: this.isActive,
        disabled: this.isDisabled,
        btn: true
      };
    }
  }
};
</script>

This will prevent a large amount of logical code from appearing in the template and will be easier to maintain.

Basically that's it. Class binding is a very basic but practical function in Vue. Mastering the two writing methods of objects and arrays, coupled with the coordination of computational attributes, can basically meet the needs of most scenarios.

The above is the detailed content of How to use class binding in Vue?. For more information, please follow other related articles on the PHP Chinese website!