VUE 性别选择
html<view class="groupSex"><view v-for="(item,index) in sexList" class="radios" :class="{radiosChecked:active == index}" @click="chooseSex(index)">{{item}}</view></view>c...
·
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];
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)