先上效果

    
       主编已回复:  
     
 
       
      { {item.label}} 
     
 
    

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