关于在vue中循环生成的单选框调样式问题

最新推荐文章于 2022-08-05 17:45:25 发布

原创最新推荐文章于 2022-08-05 17:45:25 发布 · 971 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #css

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用CSS调整循环生成的单选框样式，通过隐藏input并修改label样式实现美化。同时，展示了如何使用v-model进行双向绑定，动态改变选中状态。详细步骤包括设置input的display为none，调整label样式，并用label:after创建选中标记。点击事件用于切换选中状态，实现了交互效果。

在vue循环生成的单选框中，想要调整单选框的样式则需要额外添加一个label，再将input隐藏转而调整label的样式。

  input {
    display: none;
  }
  label {
    width: 10%;
    height: 100%;
    display: inline-block;
    position: relative;
    color: #999;
  }
  label:active {
    background: #eeeeee;
  }
  label:after {
    content: ""; /*必须设置*/
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 3px solid rgb(108, 98, 219);
    position: absolute;
    border-radius: 50%;
  }

  input:checked + label:after {
    background-color: rgb(108, 98, 219);
  }

<div class="div" v-for="(item, index) in sizes" :key="index">
          <div class="left">
            <input
              :id="index"
              type="radio"
              name="size"
              v-model="size"
              :value="item.goodsName"
              class="radio_type"
              @click="check(index)"
            />
            <label :for="index"></label>
            <i>{{ item.goodsName }}</i>
          </div>