六. Vue-样式绑定

样式绑定

处理样式的常用思路：

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',
					},
        },