Vue3 Class binding

Manipulating the class list of elements is a common requirement for data binding. Because they are attributes, we can handle them with V-bind: we just need to evaluate the string result with the expression. However, string concatenation is cumbersome and error-prone, so vue.js has special enhancements that allow expression results to be objects or arrays in addition to strings.

Object syntax

<div :class="{ active: isActive }"></div>
Copy the code

The existence of the active class in the above code depends on the data propertyisActive. You can also pass more fields into an object to dynamically switch between classes. In addition, : classes can coexist with plain classattributes.

<div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
></div>
Copy the code

data(){
    return {
        isActive: true.hasError: false}}Copy the code

The rendered result is:

<div class="static active"></div>
Copy the code

When isActive or hasError changes, the class list is updated accordingly. Bound data objects do not have to be defined inline in the template:

<div :class="classObject"></div>
Copy the code

data(){
    return {
        classObject: {
            active: true.'text-danger': false}}}Copy the code

The rendered result is the same as above. We can also bind a computed property of the return object here. This is a common and powerful pattern:

<div :class="classObject"></div>
Copy the code

data(){
    return {
        isActive: true.error: null}},computed: {
    classObject(){
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'}}}Copy the code

Array syntax

<div :class="[activeClass, errorClass]"></div>
Copy the code

data(){
    return {
        activeClass: 'active'.errorClass: 'text-danger'}}Copy the code

The rendered result is:

<div class="active text-danger"></div>
Copy the code

You can also use a ternary expression to switch classes in a list based on conditions:

<div :class="[isActive? activeClass : '', errorClass]"></div>
Copy the code

However, this is a bit cumbersome when there are multiple conditional classes, so you can use object syntax in array syntax as well:

<div :class="[{ active: isActive}, errorClass]"></div>
Copy the code

Used on components

When you use classAttribute on a custom component with a single root element, the classes are added to many elements and the existing classes on that element are not overwritten:

const app = Vue.createApp({})

app.component('my-component', {
    template: `
Hi! 
`
})
Copy the code

<div id="app">
    <my-component class="baz boo"></my-component>
</div>
Copy the code

The HTML will be rendered as:

<p class="foo bar baz boo">Hi!</p>.
Copy the code

If your component has multiple root elements, you need to use the $attrs component attribute to define which parts will accept this class:

<div id="app">
    <my-component class="baz"></my-component>
</div>
Copy the code

const app = Vue.createApp({})

app.component('my-component', {
    template: ` 
Hi! 
 This is a child component `
})
Copy the code