样式绑定

前言：在HTML中，通过class属性和style属性都可以定义DOM元素的样式

class属性用于定义元素的类名列表
style属性用于定义元素的内联样式
v-bind指令对这两个属性进行绑定

class属性绑定

首先是对元素的class属性进行绑定，绑定的对象可以是对象或数组，下面详细介绍两种对象

对象语法

将绑定的数据设置为一个对象（即类似字典），可以动态地切换元素的class。主要有3种形式

内联绑定

这种绑定，将元素的class属性直接绑定为对象的形式，其中class里有两个参数，格式如下：
<div v-bind:class="{参数1 : 参数2}"></div>

参数1：是style里的某个样式名称，即要用哪个样式
参数2：是数据对象(data)里的属性，是一个布尔值，因为用于定义是/否使用该样式

另外，在对象中还可以添加多个样式，且v-bind:class可以和普通的class属性共存
上面的简单示例如下：

<head>
    <style type="text/css">
        .default {
            text-decoration: underline;
        }
        .size {
            font-size: 18px;
        }
        .color {
            color: #6699FF;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="default" v-bind:class="{size : isSize,color:isColor}">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            isColor: true
        }
    });
</script>

非内联绑定

将元素的class属性绑定的对象定义在data选项中（而不是直接在v-bind中定义),格式如下：
<div v-bind:class="样式组名称"></div>
在data里定义的样式组，其里面的属性名即为某个样式名称
将上边的例子修改后如下：

<div id="box">
    <div class="default" v-bind:class="classObject">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            classObject: {
                size: true,	//size即样式名
                color: true, //color即样式名
            }
        }
    });
</script>

用计算属性返回样式对象

将元素的class属性绑定一个返回对象的计算属性。这是一种常用且强大的模式,格式如下：
<div v-bind:class="计算属性名称"></div>
将上边的例子修改后如下：

<div id="box">
    <div class="default" v-bind:class="show">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            isColor: true,
        },
        computed: {
            show: function () {
                return {
                    size: this.isSize,
                    color: this.isColor
                }
            }
        }
    });
</script>

上述代码的执行过程：

先执行v-bind:class="show"
再去计算方法里找show
计算方法里样式是否使用（true和false），则在data选项里定义

数组语法

将绑定的数据设置为一个数组（即类似列表），以应用一个class列表。也主要有3种形式

普通形式

将元素的class属性直接绑定为一个数组，格式如下：
<div v-bind:class="[element1, element2]"></div>
在上述格式中，element1和element2是数据对象(data)中的属性(即这两个参数名称和data选项中的属性名相同，对应的数据对象中的值为class列表中类名
简单示例如下：

<style type="text/css">
    .size {
        font-size: 18px;
    }
    .color {
        color: #6699FF;
    }
</style>
<div id="box">
    <div v-bind:class="[isSize,isColor]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: 'size',
            isColor: 'color',
        }
    });
</script>

注意：在data选项中的class列表类名要用单引号包含

数组中使用条件运算符（三目运算符）

数组形式绑定class属性，可以使用条件运算符构成的表达式来切换列表中的class，格式如下：
<div v-bind:class="[参数1?'参数2':'',参数3]">

参数1：data中的属性名称
参数2：class类名，即样式名称，注意用单引号包含
冒号后的单引号为空，意思是当参数1不满足条件时，什么也不做
参数3：其他样式的名称

示例如下：

<div id="box">
    <div v-bind:class="[isSize?'size':'',colorClass]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            colorClass: 'color',
        }
    });
</script>

数组中使用对象

使用条件运算符可以实现简单的元素class是否显示，但数量一多就显得繁琐。这种情况下，可以在数组中使用对象来更新class列表，格式如下：
<div v-bind:class="[{size:isSize},isColor]"></div>
示例如下：

<div id="box">
    <div v-bind:class="[{size:isSize},colorClass]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            colorClass: 'color',
        }
    });
</script>

注：注意区分当使用数组语法时，data选项里的参数是属性值:'class类名'的形式，而不是属性值:true/false

内联样式绑定(style)

上面介绍的是对元素的class属性进行绑定，下面介绍对元素的style属性进行绑定
同样的，绑定的数据可以是对象或数组

对象语法

对元素的style属性进行绑定，可以将绑定的数据设置为一个对象
对象中CSS属性名可以用驼峰式或短横线分隔命名

内联绑定

将元素的style属性直接绑定为对象。绑定后如可以设置文字的粗细大小等，格式如下：
<div v-bind:style="{'参数1':值1,'参数2':值2}">

参数1：样式的某个参数，如font-size设置字体大小
值1：样式参数对应的值，此变量会去找data里的同名的属性的值

示例如下：

<div id="box">
    <div v-bind:style="{fontWeight:weight,'font-size':fontSize+'px'}">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            weight: 'bold',
            fontSize: 130,
        }
    });
</script>