vue.js入门（10）动态绑定css样式

最新推荐文章于 2025-06-11 20:06:40 发布

原创最新推荐文章于 2025-06-11 20:06:40 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

24 篇文章

订阅专栏

本文通过一个简单的示例介绍了如何使用Vue.js实现元素样式的动态切换。具体包括使用v-bind:class绑定类名，根据变量changecolor的值来决定元素应用的样式，并通过点击事件来改变changecolor的状态，进而实现颜色的切换。

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	
</head>
<body>
<div id="vue-app">
		
		
	<div v-bind:class="{change:changecolor,square:!changecolor}" v-on:click="changecolor=!changecolor" >样例一</div>
	
<!--
	class里面的属性只有两个，要么true，要么false，绑定的是change样式，但是初始值changecolor是false，所以这个css样式还是为square样式
	这里我自己添加的是两个属性，是为了防止别的div进行的不是该绑定
	-->
	
	
	<button v-on:click="changecolor=!changecolor">press</button>
	<!--
	<div v-bind:class="classObject">
	<span>样例二</span>
	</div>
-->	
	
</div>
	<script src="app.js"></script>
</body>

//style.css

.square
{
background-color:#FF0000;
width:100px;
height:100px;
border:solid 1px black;
}
.change
{
background-color:#99FFCC;
width:100px;
height:100px;
border:solid 1px black;
}

//app.js

new Vue({
	el:"#vue-app",
	data:
	{	
		changecolor:false,
		
	},
 });

样例一：

首先，绑定事件，当点击时，changecolor值会变相反

v-bind属性绑定，我们可以传给 v-bind:class 一个对象，以动态地切换 class

{change:changecolor,square:!changecolor}

初始，changecolor为false，所以，不为change样式而是square样式。

在这里，无论是点击按钮，还是点击square，都可以对方框中的颜色进行改变

PS：计算属性那里出了不知名bug，暂时找不出来问题在哪，暂且搁置一下，以后知道怎么解决再回来修改！！！