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

//index.html

	
	
	
	
	



		
		
	
样例一
	

	
	
	press
		
	

	

//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，暂时找不出来问题在哪，暂且搁置一下，以后知道怎么解决再回来修改！！！