Class与Style绑定

在v-bind用于class和style时，Vue.js专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。

1、绑定HTML Class

（1）对象语法

如：

<div id="id1" class="static" v-bind:class="{'didi-orange':isRipe,'didi-green':isNotRipe}"></div>

new Vue({
        el:'#id1',
        data:{
            isRipe:true,
            isNotRipe:false
        }
    })

渲染为：

<div id="id1" class="static didi-orange"></div>

注：尽管可以用Mustache标签绑定class，比如class=”{{className}}”，不推荐这种写法和v-bind混用。

       可以直接绑定数据中的一个对象，如：

<div id="example1" v-bind:class="classObj"></div>

var vm1 = new Vue({
        el:"#example1",
        data:{
            classObj:{
                'didi-orange':true,
                'didi-green':false
            }
        }
    })

       还可以绑定一个返回对象的计算属性。这是一种常用且强大的模式。如：

<!--绑定一个返回对象的计算属性-->
<div id="example2" v-bind:class="classObj1"></div>

var vm2 = new Vue({
        el:"#example2",
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObj1:function () {
                return {
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type === 'fatal'
                }
            }
        }
    })

（2）数组语法

如：

<!--数组语法-->
<div id="example3" v-bind:class="[activeClass,errorClass]"></div>

//数组语法
    var vm3 = new Vue({
        el:"#example3",
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

渲染为：

<div id="example3" class="active text-danger"></div>

        如果想根据条件切换列表中的class，则可以用三元表达式。如：

<div id="id3" v-bind:class="[active, isTrue ? text-danger : '']"></div>

       只有isTrue 为true时才会添加text-danger。

       当有多个条件class时，在Vue.js 1.0.19及以后版本中，可以在数组语法中使用对象语法。如：

<div id="id3" v-bind:class="[active,{didiOrange:isRipe,didiGreen:isNotRipe}]"></div>

2、绑定内联样式

（1）对象语法

如：

<div id="example4" v-bind:style="{color:activeClass, fontSize:fontSize+'px'}">aaaaaaaaaa</div>

//绑定内联样式
    var vm4 = new Vue({
        el:"#example4",
        data:{
            activeClass:'red',
            fontSize:30
        }
    })

       直接绑定到一个样式对象，让模板更清晰。如：

<div id="example5" v-bind:style="styleObj">bbbbbbbb</div>

var vm5 = new Vue({
        el:"#example5",
        data:{
            styleObj:{
                color:'green',
                fontSize:'16px'
            }
        }
    })

       对象语法常常结合返回对象的计算属性使用，如：

<div id="id4" v-bind:style="ddfe"></div>

new Vue({
        el:"#id4",
        data:{
            didiAge:4,
            didiMember:6000
        },
        computed:{
            ddfe:function () {
                return {
                    color: this.didiAge>3 ? 'orange' : 'green',
                    fontSize:this.didiMember>1000 ? '20px' : '10px'
                }
            }
        }
    })

（2）数组语法

      v-bind:style的数组语法可以将多个样式对象应用到一个元素上。如：

<div v-bind:style="[ddfe,didiFamily]"></div>