绑定 HTML Class
1.对象语法绑定,可以传给 v-bind:class 一个对象,以动态地切换 class:
<div v-bind:class="{active:isActive,'text-danger': hasError}"></div>
data: {
isActive: true,
hasError: false
}
2.数组语法绑定,可以把一个数组传给 v-bind:class,以应用一个 class 列表:
<div v-bind:class="[active,hasError]"></div>
或者
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
3.根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive?'active':'',hasError]"></div>
绑定 HTML Style
1.对象语法绑定,v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
2.数组语法绑定,v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
Class和Style绑定详细讲解:https://cn.vuejs.org/v2/guide/class-and-style.html