vue里如何灵活的绑定class以及内联style

在我们平常的前端开发中少不了对DOM的操作，以及样式的动态控制，那我们在使用vue的时候该如何灵活的绑定class呢

1.最简单一个class绑定

v-bind:class设置一个对象，可以动态地切换class
例如：
<div id="app">
    <div :class ="{ 'active':isActive }"></ div>
</div>
<script>
new Vue({
    el :'#app',
    data: {
        isActive: true
    }
})
</script>
最终渲染结果为=====><div class="active"></div>

2对象中也可以传入多个属性，来动态切换class，同时class也可以与:class共存，看下面代码↓

<div id="app">
    <div class="title" :class ="{ 'active':isActive, 'addcolor':isAdd }"></ div>
</div>
<script>
new Vue({
    el :'#app',
    data: {
        isActive: true,
        isAdd: true
    }
})
</script>
最终渲染结果为=====><div class="title active addcolor"></div>

3.当class需要绑定比较多，而且逻辑比较复杂时，我们可以给:class的值绑定一个计算属性，看代码↓

<div id="app">
    <div :class ="finalclass"></ div>
</div>
<script>
new Vue({
    el :'#app',
    data: {
        isActive: true,
        isAdd: true,
        error: true
    },
    computed: {
        return {
            'active': this.isActive && this.isAdd,
            'error': this.eroor
        }
    }
})
</script>
最终渲染结果为=====><div class="active error"></div>

4.我们也可以给:class绑定数组格式，以及在数组里再加逻辑，看代码↓

<div id="app">
    <div :class ="[ {'active': isActive }, errorShow ]"></div>
</div>
<script>
new Vue({
    el :'#app',
    data : {
        isActive : true ,
        errorShow : 'error'
    }
})
</script>
最终渲染结果为=====><div class="active error"></div>

5.再来看一种组合式使用方法，看下面代码↓

<div id="app">
    <button :class ="finalclass"></button>
</div>
<script>
new Vue({
    el :'#app',
    data: {
        size: 'large',
        disabled: true
    },
    computed: {
        finalclass: function (){
            return [
                'btn',
                {
                    [ 'btn-' + this.size ]: this.size !== '',
                    [ 'btn-disabled']: this.disabled
                }
            ]
        }
    }
})
</script>
最终渲染结果为=====><button class ="btn btn-large btn-disabled"></button>

6.绑定内联样式

<div id="app">
    <div :style ="finalstyle"></div>
</div>
<script>
new Vue({
    el :'#app',
    data: {
        finalstyle: {
            color: 'blue',
            fontSize: 16+'px'
            //这里css属性的名称用驼峰命名或短横线分割命名
        }
    }
})
</script>
最终渲染结果为=====><div style="color: blue; font-size: 16px;"></div>

应用多个样式对象时，也可以使用数组语法：

<div :style="style1, style2">123</div>

----------------------------------------------------