样式绑定

处理样式的常用思路：

1.通过类名class影响标签的样式

class样式处理：

对象语法

通过v-bind绑定class，值通过对象的方式控制属性是否显示

<div id="app"> <!-- 利用v-bind绑定class，类名用对象（可以包含键值对）的方式表示 --> <div v-bind:class="{active: isActive,back: isBack}"> <!-- 键值对的左边是类名，右边是类名对应的属性，一般以is开头，其值一般为Ture或者False --> </div> <button v-on:click="switcher">切换</button> </div> var vm=new Vue( { el:'#app', /*用于告诉vue数据的填充位置，利用id等进行标注*/ data: { isBack:true, isActive:true, // 默认值为true }, methods: { switcher:function(){ // 利用取反操作，控制isActive的值的切换，从而实现样式的更改 this.isActive=!this.isActive this.isBack=!this.isBack } } }); 数组语法

将类放在数组里面，直接更改值来实现样式的转换

<div id="app"> <div v-bind:class="[activeClass,backClass]"> </div> <button v-on:click="switcher">切换</button> </div> data: { activeClass:'active', backClass:'back', }, methods: { switcher:function(){ this.activeClass=''; } //该法中，类的样式取决于值，如为空则无此类样式，可以设置其他值，使该类具有不同样式

样式绑定的相关语法细节：

对象绑定与数组绑定可以结合使用 <div v-bind:class="[activeClass,backClass],{test: isTest}"></div> class绑定的值可以简化操作 <div v-bind:class="arrayClasses"></div> <div v-bind:class="objClasses"></div> data: { arrayClasses:['active','back'],//数组的简化用法 objClasses:{ active:true back:true }, //对象的简化用法 } methods: { switcher:function(){ this.objClasses= false; } 默认的class该如何处理？

默认的class不会被覆盖，而会结合在一起,如下列中，默认的base类会和原本的类共同形成样式

<div class='base' v-bind:class='objClasses'></div>

2.直接更改标签的style属性，定义标签的内部样式

对象语法：

写的是具体在data中CSS样式中定义的值

当涉及到的属性较少时

<div v-bind:style="{border:borderStyle,width: widthStyle,height:heightStyle}"></div> <button type="button" v-on:click="switcher()">切换</button> data: { borderStyle:'1px solid blue', widthStyle:'20px', heightStyle:'100px', }, methods: { switcher:function(){ this.widthStyle='50px' }

属性较多时，可以使用简化的写法

<div v-bind:style="objStyles"></div> <button type="button" v-on:click="switcher()">切换</button> data: { objStyles:{ border:'3px solid red', width:'45px', height:'150px', } }, methods: { switcher:function(){ this.objStyles.width='90px'; } 数组语法

相当于能放多个对象简化后的语法

<div v-bind:style="[objStyles , overStyles]"></div> data: { objStyles:{ border:'3px solid red', width:'45px', height:'150px', }, // 这两之间，已有的属性会被后者覆盖，没有则联合显示 overStyles:{ border:'5px solid yellow', backgroundColor:'blue', }, },