動的バインディング属性: クラスを記述する 2 つの方法

1. 目的

クリック時のオプションの色を変更します。このタブは 2 つの div で構成されています。
2. 知識
: 2 種類のクラスの書き方

(1) 最初の書き方

:class="関係式か論理式か? '選択スタイル':'基本スタイル'"

(2) 2つ目の書き方
: class="{'selected style': relationship or logical expression}"
3. 実現
(1) 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の 2 番目の書き方

<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;
	}