先上效果

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

原文地址：https://segmentfault.com/a/1190000012846991

轉載于:https://www.cnblogs.com/lalalagq/p/9959548.html

總結

以上是生活随笔為你收集整理的vue2实现自定义样式radio单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。