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>