1. Purpose
To change the color of the option when clicked. This tab is composed of two divs.
2. Knowledge
: two ways of writing class
(1) The first way of writing
:class="Relational expression or logical expression? 'Selected style':'Basic style'"
(2) The second way of writing
: class="{'selected style': relationship or logical expression}"
3. Realize
(1) The first way of writing
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) The second way of writing
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;
}