Vue：class的对象绑定，style的对象绑定

最新推荐文章于 2025-06-23 14:54:47 发布

原创最新推荐文章于 2025-06-23 14:54:47 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #style #对象绑定 #vue

vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文通过实例演示了如何在Vue.js中实现元素样式的动态绑定，包括使用对象和数组方式来切换元素的颜色和字体大小，展示了Vue的响应式机制和DOM操作技巧。

如何实现class的对象绑定
创建一个点击文字改变颜色的小demo
html

<div id="app">
	<div @click="hdclick" :class="{activated: isActivated}">Hello Box</div>
</div>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			isActivated: false
		},
		methods:{
			hdclick: function(){
				this.isActivated = !this.isActivated;
			}
		}
	})
</script>

style

<style>
	.activated{
		color: red;
	}
</style>

效果
在这里插入图片描述

第二种写法，使用数组能达到同样的效果

<div id="app">
			<div @click="hdclick" :class="[activated]">Hello Box</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					activated: ""
				},
				methods:{
					hdclick: function(){
						this.activated = this.activated === "activated" ?
							"" : "activated"
					}
				}
			})
		</script>

实现style的对象绑定

<div id="app">
			<div @click="hdclick" :style="styleObj">Hello Box</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					styleObj: {
						color: "black"
					}
				},
				methods:{
					hdclick: function(){
						this.styleObj.color = this.styleObj.color === "black" ?
							"red" : "black"
					}
				}
			})
		</script>

在style中使用数组

<div id="app">
			<div @click="hdclick" :style="[styleObj, {fontSize: '20px'}]">Hello Box</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					styleObj: {
						color: "black"
					}
				},
				methods:{
					hdclick: function(){
						this.styleObj.color = this.styleObj.color === "black" ?
							"red" : "black"
					}
				}
			})
		</script>