html
<view class="groupSex"> <view v-for="(item,index) in sexList" class="radios" :class="{radiosChecked:active == index}" @click="chooseSex(index)">{{item}}</view> </view>css
.groupSex{ position: absolute; top: 36upx; right: 22upx; width: auto; height: 30upx; display: flex; .radios{ /*width: 62upx;*/ width: auto; height: 30upx; margin-left: 94upx; line-height: 30upx; background: url("../../../static/images/user/unChecked.png") no-repeat left center; background-size: 30upx 30upx; text-indent: 37upx; font-size:24upx; font-family:PingFang SC; font-weight:500; color:rgba(167,180,205,1); } .radiosChecked{ background: url("../../../static/images/user/checked.png") no-repeat left center; background-size: 30upx 30upx; } }js
export default { data() { return { sexList:["男","女"], active: 0, }; }, methods: { chooseSex(index){ this.active = index; this.sex = this.sexList[index]; } } }