vue动态绑定class和style

最新推荐文章于 2025-05-26 06:32:23 发布

小妳豆子

最新推荐文章于 2025-05-26 06:32:23 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45719052/article/details/126195117

本文深入探讨了Vue.js中如何使用v-bind指令动态地绑定元素的class和style属性，包括条件类、多个类的组合以及内联样式的应用。通过实例解析，帮助开发者更好地理解和应用这一特性来提升前端开发效率。

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

vue动态绑定class和style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
		<style type="text/css">
			.active{
				border-bottom: 2px solid red;
			}
			.danger{
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <b>动态绑定class类名</b>
			<b>对象的方式  当值为true时  键当做类名绑定  为false 不绑定</b>
			<div v-bind:class="{'active':isActive,'danger':hasError}">wwawawawaw</div>
			<i>数组的方式  数组的每一项都会当做类名渲染</i>
			<p :class="['aa','bb']">这三个类名一样</p>
			<p class="aa bb">这三个类名一样</p>
			<p :class="'aa bb'">这三个类名一样</p>
			<p :class="[active,errorclass]">这是个p标签</p> -->
		
			<b>动态绑定style</b>
			<i>对象的方式 键当做样式的属性 值当做样式的值</i>
			<p :style="{color:color,fontSize:fontSize}">一段话</p>
			<i>数组的方式 每个数组项都可以是一个样式的对象 然后把数组中的每个对象合并成一个style</i>
			<p :style="[baseStyle,styles]">也是亿欧短话</p>
		
		
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					isActive:true,
					hasError:true,
					
					active:"active",
					errorclass:"danger",
					
					color:"red",
					fontSize:"20px",
					baseStyle:{
						magin:0,
						padding:0
					},
					styles:{
						color:"#f0f",
						fontSize:"22px"
					}
				}
			})
		</script>
	</body>
</html>