vue2实现自定义样式radio单选框

最新推荐文章于 2025-07-11 15:30:05 发布

转载最新推荐文章于 2025-07-11 15:30:05 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/xiaocaiyuxiaoniao/p/9625590.html

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

27 篇文章

订阅专栏

该博客展示了如何在Vue.js中创建一个单选按钮组，利用v-for指令动态渲染选项，并通过JavaScript处理点击事件来切换选中状态。代码包括HTML结构、Vue实例的数据和方法，以及CSS样式实现选中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果

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