vue绑定style和class 对象写法

news2024/10/2 14:32:13

适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

绑定 class 样式【对象写法】：

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.border{
	border: 20px solid red;
}
.radius{
	border-radius: 25px;
}

<div id="APP">
	<div class="box" :class="classObj">多个class样式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			classObj:{
				aqua: true,
				border: false,
				radius:false
			}
		}
	}
});

注：对象写法中的键名必须是 class 类名，值如果为 true 表示使用，如果为 false 表示不使用。当然我们也可以动态修改它的值，选择是否使用。

对象写法也可以直接写在标签中，例：

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.border{
	border: 20px solid red;
}
.radius{
	border-radius: 25px;
}

<div id="APP">
	<div class="box" :class="{aqua:a, border:b, radius:c}">多个class样式</div>
</div>

注：效果与上边的示例相同，a、b、c 都是变量，控制是否使用某个 class 样式。

绑定 style 样式【对象写法】：

<div id="APP">
	<div :style="styleObj">绑定style样式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			styleObj:{
				width: '100px',
				height: '100px',
				backgroundColor: "aqua"
			}
		}
	}
});

注：动态绑定 style 样式时，属性必须使用小驼峰命名法，例如：backgroundColor 。

绑定 style 样式【数组写法】：

<div id="APP">
	<div :style="styleArr">绑定style样式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			styleArr:[
				{
					width: "100px",
					height: "100px"
				},
				{
					backgroundColor: "aqua",
					border:"20px solid red"
				}
			]
		}
	}
});

注：使用数组写法绑定 style 样式时，数组其实是由多个样式对象组成的。

数组写法也可以直接写在标签中，与上面示例的效果相同。

<div id="APP">
	<div :style="[styleObj1,styleObj2]">绑定style样式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			styleObj1:{
				width: "100px",
				height: "100px"
			},
			styleObj2:{
				backgroundColor: "aqua",
				border:"20px solid red"
			}
		}
	}
});