VUE之v-bind类名与样式绑定

v-bind
语法格式1：单个语法格式
v-bind:attributeName=variable

语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”

class-对象语法-单类名切换
语法：传给 v-bind:class 一个对象，以动态地切换 class：

1、给v-bind:class设置一个对象，可以动态切换class。

<div id="app">
			<div :class="{active:isActive}"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isActive:true
			}
})

isActive为true时，结果为

isActive为false时，结果为

2、 除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class

<div id="app">
			<div :class="{active:isActive,area:areastatus,bg:isbg}"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isActive:false,
				areastatus:true,
				isbg:true
			}
})

3、v-bind:class 指令也可以与普通的 class 属性共存

<div id="app">
			<div class="static" :class="{active:isActive}"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isActive:true
			}
})

4、绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来

<div id="app">
			<div class="static" :class="classObject"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				classObject:{
					isActive:true,
					areastatus:true,
					isbg:true
				}
			}
})

对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由

5、当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。

<div id="app">
			<div :class="class_computed"></div>
</div>
	
var app = new Vue({
			el:'#app',
			data:{
				isActive:true,
				isStatus:false
			},
			computed:{
				class_computed:function(){
					return {
						active:this.isActive && this.isStatus,
						status:this.isActive && !this.isStatus,
						area:!this.isActive || !this.isStatus,
					}
				}
			}
})

6、当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表

<div id="app">
			<div :class="[isActive,isStatus,isArea]"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isActive:'active',
				isStatus:'status',
				isArea:'area'
			}
})

7、可以使用三元/目运算符来根据条件切换class

<div id="app">
			<div :class="[isActive?isStatus:'']"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isActive:true,
				isStatus:'status'
			}
})

8、当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法

<div id="app">
			<div :class="[{'status':isStatus},isArea]"></div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				isStatus:true,
				isArea:'area'
			}
})

9、与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种友好且常见的语法。

使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性

内联样式style-对象语法
v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象

<div id="app">
			<div :style="{'color':colorValue,'fontSize':sizeValue+'px'}">哈哈哈哈</div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				colorValue:'red',
				sizeValue:50
			}
})

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，以data为例，修改上面案例
这样会让模板更加清晰

<div id="app">
			<div :style="styleObj">哈哈哈哈哈哈</div>
	</div>

var app = new Vue({
			el:'#app',
			data:{
				styleObj:{
					color:'red',
					fontSize:50+'px'
				}
			}
})

也可以用计算属性用法绑定

<div id="app">
			<div :style="styleObj">哈哈哈哈哈哈</div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				color1:'red',
				color2:'green',
				fontSize:50,
				isActive:false
			},
			computed:{
				styleObj:function(){
					return{
						color:[this.isActive?this.color1:this.color2],
						fontSize:this.fontSize+'px'
					}
				}
			}
})

以上就是VUE之v-bind类名与样式绑定，如有问题请留言给小编！