Vue · 通过属性绑定为元素设置样式_vue给元素添加样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_38604274/article/details/104820993

本文介绍了如何在Vue.js中通过属性绑定来动态地为元素设置样式。内容涵盖了使用class样式，包括数组、三元表达式、嵌套对象和直接使用对象的方式。此外，还详细讲解了内联样式的使用，包括直接在元素上通过`:style`设置样式，将样式对象定义在data中并引用，以及通过数组引用多个data上的样式对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用class样式

1、数组

<h2 :class=['blue','small']>哈哈哈我是个h2</h2>

2、数组中使用三元表达式

<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>

3、数组中嵌套对象

在数组中用嵌套对象来代替三元表达式，提高代码可读性

<h2 :class="['blue','small',{'active':isactive}]">哈哈哈我是个h2</h2>

4、直接使用对象

在为class使用v-bind绑定对象时，对象的属性是类名。

对象的属性可带引号或不带引号

属性的值是一个标识符

<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>

【代码实现】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.blue{
				color: cornflowerblue;
			}
			.small{
				font-weight: 100;
			}
			.active{
				font-style: italic;
				color: darkmagenta;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 :class=['blue','small']>哈哈哈我是个h2</h2>
			<br />
			<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>
			<br />
			<h2 :class="['blue','small',{'active':isactive}]">哈哈哈我是个h2</h2>
			<br />
			<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>
			<h2 :class="classObj">哈哈哈我是个h2</h2>
		</div>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					isactive:false,
					classObj:{blue:true,small:true,active:true}
				},
				methods:{}
			})
		</script>
	</body>
</html>

【实现效果】

二、使用内联样式

1、在元素上通过:style的形式写样式

<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>

2、降样式对象定义到data中，并直接引用到:style中

先在data上定义样式：

data:{
	classObj:{blue:true,small:true,active:true}
},

再在元素中，通过属性绑定，绑定元素样式：

<h2 :class="classObj">哈哈哈我是个h2</h2>

3、在:style中通过数组，引用多个data上的样式对象

先在data上定义样式：

data:{
	classObj1:{blue:true,small:true,active:true},
	classObj2:{active:true}
},

再在元素中，通过属性绑定，绑定元素样式：

<h2 :class="[classObj1,classObj2]">哈哈哈我是个h2</h2>