VUE-二选一按钮效果设置
1、功能说明:点击【是】,按钮变蓝色且字体白色,【否】按钮无背景且字体蓝色2、样式设置<div class="radio"><div :class="[flag===0?yes:no]" @click="chooseEmer(0)">是</div><div :class="[flag===1?yes:no]" @click="c...
·
1、功能说明:
点击【是】,按钮变蓝色且字体白色,【否】按钮无背景且字体蓝色
2、样式设置
<div class="radio">
<div :class="[flag===0?yes:no]" @click="chooseEmer(0)">是</div>
<div :class="[flag===1?yes:no]" @click="chooseEmer(1)">否</div>
</div>
.radio{
>div{
float left
width 4.2rem
height 2rem
line-height 2rem
text-align center
border-radius 1rem
&:nth-child(1){
margin-right 0.8rem
}
}
.yes{
background-color $color-text-blue
color #fff
}
.no{
border 1px solid $color-text-blue
color $color-text-blue
}
}
3、data中的数据,需要记录样式
flag:0,
yes:"yes",
no:"no"
4、methods中的方法
// 是否选择
chooseEmer(itype){
if(itype===0){
this.flag=0
}else{
this.flag=1
}
},
更多推荐
已为社区贡献32条内容
所有评论(0)