007_Vue style样式绑定

最新推荐文章于 2025-02-20 11:12:50 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-02-20 11:12:50 发布

阅读量569

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122852127

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue.js中v-bind:style的两种用法：对象语法和数组语法，并提供了相应的代码示例。通过对象语法和数组语法，可以方便地动态绑定元素的样式。示例中展示了如何切换样式，点击按钮后改变宽度属性，从而动态更新元素样式。

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

1. style样式绑定处理

1.1. 对象语法

<div v-bind:style="{width: '400px', height: '50px'}"></div>

1.2. 数组语法

<div v-bind:style="[{width: 400px'}, {height: '50px'}]"></div>

2. 对象绑定style

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>对象绑定style</title>
	</head>
	<body>
		<div id="app">
			<div>
				<span v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}">对象绑定style</span><br />
				<button @click="handle1">切换样式</button>
			</div>

			<br />
			
			<div>
				<span v-bind:style="objStyle">对象绑定style简化</span><br />
				<button @click="handle2">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					borderStyle: "solid 1px",
					widthStyle: "400px",
					heightStyle: "50px",
					displayStyle: "block",
					objStyle: {border: "solid 1px", width: "400px", height: "50px", display: "block"}
				},
				methods: {
					handle1: function(event) {
						this.widthStyle = "200px";
					},
					handle2: function(event) {
						this.objStyle.width = "200px";
					}
				}
			});
		</script>
	</body>
</html>

2.2. 效果图

2.3. 点击2个切换样式按钮后

3. 数组绑定style

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数组绑定style</title>
	</head>
	<body>
		<div id="app">
			<div>
				<span v-bind:style="[{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}, {color: colorStyle}]">数组绑定style</span>
				<br /><button @click="handle1">切换样式</button>
			</div>

			<br />
			
			<div>
				<span v-bind:style="arrStyle">数组绑定style简化</span>
				<br /><button @click="handle2">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					borderStyle: "solid 1px",
					widthStyle: "400px",
					heightStyle: "50px",
					displayStyle: "block",
					colorStyle: "red",
					arrStyle: [{border: "solid 1px", width: "400px", height: "50px", display: "block"}, {color: "red"}]
				},
				methods: {
					handle1: function(event) {
						this.widthStyle = "200px";
					},
					handle2: function(event) {
						this.arrStyle[0].width = "200px";
					}
				}
			});
		</script>
	</body>
</html>

3.2. 效果图