Vue系列教程（九）属性绑定为元素设置class类样式

Vue中为页面设置样式的方式有两种，class方式和style方式。

这篇博客介绍class方式：

首先回顾我们不使用Vue的时候设置class的方式：

<style>
    .red {
        color: red;
    }

    .thin {
        font-weight: 200;
    }
</style>

<h1 class="red thin">这是一个h1标签</h1>

页面效果：

Vue中是使用v-bind:class（或简写形式:）来绑定class样式的，下面来看Vue中设置class样式的方式：

1.数组

<style>
.thin {
        font-weight: 200;
    }
</style>

<h1 v-bind:class="['thin']">这是一个h1标签</h1>

2.数组中使用三元表达式

.thin {
        font-weight: 200;
    }

    .italic {
        font-style: italic;
    }

    .active {
        letter-spacing: 0.5em; /*设置每个字符间距*/
    }

<div id="app">
	<h1 v-bind:class="['thin','italic',flag?'active':'']">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {}
    })
</script>

当flag为true的时候数组为['thin','italic','active']，当flag为false的时候数组为['thin','italic','']

3.数组中嵌套对象

这种方式是对三元表达式的优化，可以提高代码的可读性：

.thin {
        font-weight: 200;
    }

    .italic {
        font-style: italic;
    }

    .active {
        letter-spacing: 0.5em; /*设置每个字符间距*/
    }

<div id="app">
    <h1 v-bind:class="['thin','italic',{'active':flag}]">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {}
    })
</script>

4.直接使用对象

.thin {
        font-weight: 200;
    }

    .italic {
        font-style: italic;
    }

    .active {
        letter-spacing: 0.5em; /*设置每个字符间距*/
    }

<h1 v-bind:class="{thin: true, italic: true, active: true}">这是一个h1标签</h1>

在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没有写引号。

将class写成对象的引用：

<div id="app">
    <h1 v-bind:class="classObj">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObj: {thin: true, italic: true, active: true}
        },
        methods: {}
    })
</script>

推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
Vue系列教程（八）v-model实现计算器案例