class类名绑定
class 类名绑定分为对象控制和数组控制。
对象控制绑定样式
CSS 代码如下。
<style>
.redColor{color:red}
.fSize{font-size: 20px;}
.bgColor{background: #666;}
</style>不使用 Vue 属性绑定类样式，而是使用正常的引用方式，代码如下。
<div id="app" v-cloak>
<div class="redColor fSize bgColor">
<h1>Hello World</h1>
</div>
</div>使用 Vue 属性绑定类样式，代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
istrue: true
},
methods: {
// 方法可以在这里定义
}
});
</script>代码解析如下。
-
使用属性绑定的形式绑定类样式用 :class。
-
class 属性值是对象，true 表示启用样式，false 表示移除样式。
除了在对象中直接使用 true 或 false 控制，class 类绑定更常用的一种使用方法是在 M 层控制，代码如下。
M 层代码如下。
视图层代码如下。
<div id="app" v-cloak>
<div :class="{ redColor: true, fSize: true, bgColor: true }">
<h1>Hello World</h1>
</div>
</div>代码解析如下。
使用 :class，属性值就成为了变量，上述代码中的 istrue 就成了变量，会到 M 层找 istrue 变量，由于在 data 中定义了此变量，最终会直接取 istrue 变量的值。