前面涉及到的动态更新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>
vue.js实战 第一篇 第四章 v-bind及class与style绑定
原文：https://www.cnblogs.com/fishope/p/10855430.html