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>