动态绑定属性:class两种写法

1、目的

实现点击时选项变色。这个选项卡是由两个div拼成的。
2、知识
:class的两种写法

（1） 第一种写法

:class=" 关系表达式或逻辑表达式 ? ’ 选中样式 ‘:’ 基本样式 '"

（2） 第二中写法
:class=“{’ 选中样式 ':关系或逻辑表达式}”
3、实现
（1）第一种写法
vue

<div class="monthStyle" :class="choseYearDay==0?'choseStyle':'monthStyle'">月</div>
<div class="dayStyle" :class="choseYearDay==1?'choseStyle':'dayStyle'">日</div>

css

   //选中样式
	.choseStyle{
    
    
		background-color:$themeColor;
		color: #fff;
	}
	//基本样式
	.monthStyle,.dayStyle{
    
    
		border:1px solid $themeColor;
		padding: 8px 22px;
		color: $themeColor;
		
	}
	.monthStyle{
    
    
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.dayStyle{
    
    
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

（2）第二种写法
vue

<div class="monthStyle" :class="{'choseStyle':choseYearDay==0}">月</div>
<div class="dayStyle" :class="{'choseStyle':choseYearDay==1}">日</div>

css

//选中样式
	.choseStyle{
    
    
		background-color:$themeColor;
		color: #fff !important;//注意，加了！important,以覆盖原有字体颜色。
	}
	//基本样式
	.monthStyle,.dayStyle{
    
    
		border:1px solid $themeColor;
		padding: 8px 22px;
		color: $themeColor;
		
	}
	.monthStyle{
    
    
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.dayStyle{
    
    
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}