vue_class 綁定_style 綁定

1. class 綁定

data: {

myClass: "bClass",

hasA: true,

hasB: false

}

字符串模式： 類名不肯定

<p class="aClass" :class="myClass">該標籤將有一個靜態 aClass 和 一個動態 bClass</p>

對象模式： 類名肯定，值不肯定

<p :class="{"aClass": hasA, "bClass": hasB}">類名的狀態切換</p>

數組模式：

<p :class="['aClass', myClass]">多個動態類名</p>

2. style 綁定

data: {

myColor: "#f00",

mySize: 20

}

<p :style="{"color": myColor, "font-size": mySize+'px'}">多個動態類名</p>