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