vue.js实战 第一篇 第四章 v-bind及class与style绑定

前面涉及到的动态更新html元素属性：

<a :href="url">link</a>
<img :src="imgUrl">

绑定class的几种方式：

1、对象语法

<div :class="{'active':isActive}"></div>
<div class="static" :class="{'active':isActive,'error':isError}"></div>

<div :class="classes"></div>
data:{isActive:true},
computed:{
　　classes:function(){
　　　　return {
　　　　　　active:isActive,
　　　　　　error:false
　　　　}
　　}
}
//除计算属性外，还可以直接绑定一个object数据，或methods

2、数组语法

//多个class
<div :class="[activeCls,errorCls]"></div>
data:{
    activeCls:'active',
    errorCls: 'error'
}

//条件，三元表达式
<div :class="[isActive?activeCls:'', errorCls]"></div>

//多个条件
<div :class="[{'active':isActive}, errorCls]"></div>
data:{
    isActive: true,
    errorCls: 'error'
}

//计算属性
<button :class="classes"></button>
data:{
   size: 'large',
   disabled: true
},  
computed:{
    classes: function(){
        return [
            'btn',
            {
                ['btn-' + this.size]: this.size !=='',
                ['btn-disable']:this.disabled
            }
        ];
    }
}

使用计算属性给元素动态设置类名，在业务中经常会用到。

3、在组件上使用

声明一个简单的组件

Vue.component('my-compoenent',{
    template: '<p class="article">text</p>'
});

<my-component :class="{'active': isActive}"></my-component>
data: {
    isActive:true
}

这种方法仅适用于自定义组件的最外层是一个根元素，否则无效。如果要给具体的子元素设置类名，应当使用组件的props来传递。

4、绑定内联样式

<div :style="{'color': color, 'fontSize':fontSize + 'px'}">text</div>
data: {
    color: 'red',
    fontSize: 14
}

css属性名称使用驼峰或短横分割命名。

许多情况，写在data或computed中

<div :style="styles">text</div>
data: {
    color: 'red',
    fontSize:14+'px'
}

<div :style="[styleA,styleB]">text</div>