绑定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>