6、style和class绑定

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

原创最新推荐文章于 2025-05-26 06:32:23 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍Vue中如何使用v-bind:style及v-bind:class进行样式绑定，包括直接在标签内定义样式对象以及在Vue实例中定义样式的两种方式。

style

示例：

<body>
		<div id="app">
			<div v-bind:style="styleObejct">style</div>
                   <div v-bind:style="{color:'red', fontSize:'20px'}">style2</div>
		</div>
		<script>
			var data = {
				styleObejct:{
					color:'red',
					fontSize:'30px'
				}
			};
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>
	</body>

通过v-bind:style去设置样式，两种写法
一种是直接在v-bind:style后面写入一个json对象，驼峰格式
另一种是在vue里设置。

class，和style大同小异

<body>
		<div id="app">
			<div class="static" v-bind:class="{active:isActive}">样式</div>
			<div class="static" v-bind:class="classObject">classObject</div>
		</div>
		<script>
			var data = {
				isActive:false,
				classObject:{
					active:true
				}
			};
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>
	</body>