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

 

Logo

前往低代码交流专区

更多推荐