绑定class的几种方式

对象语法

v-bind:class设置一个对象，动态切换class。当isActive为true时，div会拥有类名active，为false时没有class名渲染。

:class也可以与普通的class共存，也可传入多个属性。

<div id="app">
    <div :class="{'active':isActive}"></div>//class="active"
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
    //class="static active"
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true,
            isError:false
        }
    })
</script>

当class表达式过长，可以使用computed计算属性。

<div id="app">
    <div :class="classes">大大方方的</div>
    //class="active textf"
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true,
            error:true
        },
        computed:{
        	classes:function(){
        		return{
        			active:this.isActive,
        			textf:this.error 
        		}
        	}
        }
    })
</script>

数组语法

需要应用多个class时，可以使用数组语法，定义一个class数组。

<div id="app">
    <div :class="[activeCls,errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            activeCls:'active',
            errorCls:'error'
        }
    })
</script>
渲染结果:
<div class="active error"></div>

可以在数组语法中使用对象语法。

<div id="app">
    <div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true,
            errorCls:'error'
        }    
    })
</script>

绑定内联样式

对象语法

<div id="app">
    <div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            color:'red',
            fontSize:14
        }
    })
</script>

css属性名称使用驼峰命名或者短横分隔命名，渲染后为

<div style="color:red;font-size:14px"></div>

 写在data里维护,也可以写在computed里维护。

<div id="app">
    <div :style="styles">文本</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            styles:{
                color:'red',
                fontSize:14+'px'
            }
        }
    })
</script>