1、先上图
image.png
2、template
<div class="radio-box" v-for="(item,index) in radios" :key="item.id">
<span class="radio" :class="{'on':item.isChecked}"></span>
<input v-model="sex" :value="item.value" class="input-radio" :checked='item.isChecked' @click="huoqu(index)" type="radio">{{item.label}}
</div>
3、script
data() {
return {
sex: '男',
radios:[
{
label: '男',
value:'男',
isChecked: false,
},
{
label: '女',
value:'女',
isChecked: false,
}
]
}
},
methods:{
huoqu(index){
// 先取消所有选中项
this.radios.forEach((item) => {
item.isChecked = false;
});
//再设置当前点击项选中
this.sex = this.radios[index].value;
// 设置值，以供传递
this.radios[index].isChecked = true;
},
}
