vue2實現自定義樣式radio單選框

先上效果

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