Vue样式绑定实践-优快云博客

本文详细介绍Vue中使用v-bind进行样式绑定的方法，包括条件样式、对象样式及内联样式的应用，通过实例展示如何灵活控制元素样式。

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

vue中样式

懒癌犯了，代码内有注释就不单独列出来写了

代码

<!doctype html>
	<head>
	<title>vue中样式</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.red{
			color:red;
		}
		.thin{
			font-weight:100;
		}
		.italic{
			font-style:italic;
		}
		.active{
			letter-spacing:0.5em;
		}
	</style>
	</head>

	<body>
		<div id="app1" class="">
			<!-- 第一种使用方式，需要使用v-bind数据绑定 -->
			<h1 :class="['red','thin']">这是第一个带标题</h1>
			<!-- 在数组中使用三元表达式 -->
			<h1 :class="['red','thin',flag?'active':'']">这是第二个带标题</h1>
			<!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 -->
			<h1 :class="['red','thin',{'active':flag}]">这是第三个带标题</h1>
			<!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号也可不带。属性的值是一个标识符。 -->
			<h1 :class="{ red:true, thin:true, italic:true, active:true }">这是第四个带标题</h1>
			<!-- 也可以把内容写到M中然后使用 -->
			<h1 :class="classObj">这是第五个带标题</h1>
			<!-- 使用内联样式 -->
			<h1 :style="{ color:'red', 'font-size':100}">这是使用内联样式的带标题</h1>
			<h1 :style="styleObj1">这也是使用内联样式的带标题</h1>
			<!-- 这是使用数组来使用多个样式 -->
			<h1 :style="[ styleObj1, styleObj2 ]">这还是使用内联样式的带标题</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
			el: '#app1',
			data: {
				flag: true,
				classObj: { red:true, thin:true, italic:true, active:true },
				styleObj1: { "font-style": 'italic' },
				styleObj2: { color:'red', "font-weight":'100' }
			},
			methods: {}
			})
		</script>
	</body>
</html>