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

前往低代码交流专区

更多推荐