先上效果
<div class="reply">主编已回复:<div class="radio-box" v-for="(item,index) in radios" :key="item.id"><span class="radio" :class="{'on':item.isChecked}"></span><input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked' @click="check(index)" type="radio">{{item.label}}</div></div>
js:
data() {return {radio: '1',radios:[{label: '是',value:'1',isChecked: true,},{label: '否',value:'2',isChecked: false,},{label: '全部',value:'3',isChecked: false,},]}},methods: {check(index) {// 先取消所有选中项this.radios.forEach((item) => {item.isChecked = false;});//再设置当前点击项选中this.radio = this.radios[index].value;// 设置值，以供传递this.radios[index].isChecked = true;console.log(this.radio);}}
样式：
.radio-box{display: inline-block;position: relative;height: 25px;line-height: 25px;margin-right: 5px;}.radio {display: inline-block;width: 25px;height: 25px;vertical-align: middle;cursor: pointer;background-image: url(../../../common/images/radio.png);background-repeat: no-repeat;background-position: 0 0;}.input-radio {display: inline-block;position: absolute;opacity: 0;width: 25px;height: 25px;cursor: pointer;left: 0px;outline: none;-webkit-appearance: none;}.on {background-position: -25px 0;}
原文地址：/a/1190000012846991
