样式绑定

最新推荐文章于 2025-10-29 11:14:49 发布

原创最新推荐文章于 2025-10-29 11:14:49 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用对象绑定、数组绑定及内联样式绑定来改变DOM元素的样式，通过实例展示了不同绑定方式的具体应用，帮助开发者更好地理解和掌握Vue.js的样式绑定技巧。

对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>click to change the color</title>
	<script src="./vue.js"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>

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

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

</body>
</html>

数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>click to change the color</title>
	<script src="./vue.js"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>

	<div id="app">
		<div :class="[activated]" @click="changeColor">Hello</div>
	</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				activated:''
			},
			methods:{
				changeColor(){
					if(this.activated===''){
						this.activated="activated";
					}
					else{
						this.activated="";
					}
				}
			}
		})
	</script>

</body>
</html>

style绑定

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app' :style="changeColor" @click='handleColor'>hello
	</div>


	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				changeColor:{
					color:'black'
				}
			},
			methods:{
				handleColor(){
					this.changeColor.color=this.changeColor.color=='black'?'red':'black'
				}
			}
		})
	</script>


</body>
</html>

也可以写成数组

	<div id='app' :style="[changeColor,{fontSize:'20px'}]" @click='handleColor'>hello</div>