# Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
# class 绑定
- 三元运算符
<div id="app">
<div :class=" num <= 10 ? 'on' : 'green'">
1234
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
num: 9,
};
},
});
</script>
- 对象语法
- 绑定单个 class
<!-- 下面表示 active 这个 class 存在与否将取决于数据属性 -->
<div v-bind:class="{ active: isActive }"></div>
- 绑定多个 class
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
- 数组语法 可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
activeClass: "active",
errorClass: "text-danger",
};
},
});
</script>
# 内联样式绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
- 对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
activeColor: "red",
fontSize: 30,
styleObject: {
color: "red",
fontSize: "13px",
},
};
},
});
</script>
- 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<script>
let vm = new Vue({
el: "#app",
data: {
baseStyles: {
color: "green",
fontSize: "30px",
},
overridingStyles: {
"font-weight": "bold",
},
},
});
</script>