CSS动态选择展示的样式

需求：当不同状态的时候，显示的颜色不同
VUE

在html中：

// 盒子 根本原理：通过true和false来决定是否显示
<div :class="{'showStyle': show, 'unshowStyle':unshow, tt}">
{{text}}
</div>

在script中:

data(){
 return {
  	text: '你好呀',
  	show: null,
  	unshow: null
  }
 },
method:{
  test(){
	if(true){
	 	this.show = true
	 	this.unshow = false
	 }else{
	 	this.show = false
	 	this.unshow = true	
	 }
	}
}

在html中：

.tt{
	width:200px;
	height:200px;
}
.showStyle{
	background-color:blue;
}
.unshowStyle{
	background-color:yellow;
}