Class & Style

Multiple classes with Array

Model:

{
  classes: ["w32", "h32", "rounded-full", "mx-auto"]
}

Template:

<img :class="classes" />

Output:

<img class="w32 h32 rounded-full mx-auto" />

Conditional Classes with Object

Model:

{
    classes: {
        'mx-auto': true,
        'has-error': false
    }
}

Template:

<div :class="classes"></div>

Output:

<div class="mx-auto"></div>

Conditional Classes with Getter + Object

Model:

{
    hasErrors: true,
    get classes() {
        return {
            errors: this.hasErrors
        }
    }
}

Template:

<form :class="classes"></form>

Output:

<form class="errors"></form>

Inline Styles

Model:

{
   primary: true,
   style: {
        display: "inline-block",
        borderRadius: "3px",
        background: this.primary ? "white" : "transparent",
        color: this.primary ? "black" : "white",
        border: "2px solid white",
    }
}

Template:

<button :primary :style></button>

Output:

<button
  primary
  style="
    display: inline-block; 
    border-radius: 3px; 
    background: white; 
    color: black; 
    border: 2px solid white;"
></button>