在vue js中更改单选按钮的样式

Question

我能知道如何在vue js中更改单选按钮的样式，该样式会将单选按钮和按钮的标签合并在一起。我试图根据此链接Simple Radio Button Styling进行更改，但无法更改。下面是代码

<div id="product">
    <h4>{{$translate('options')}}</h4>
      <div v-for="(a,key,index) in attribute">
         <h5>{{a}}</h5>
           <v-radio-group small row v-model="selected[index]">
              <v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
           </v-radio-group>
       </div>

我想通过这种样式的按钮来制作

这种类型的风格

我真的希望有办法解决这个问题，我想从错误中学习，因为我仍在学习vue js

Answer 1

您可以使用v-for来呈现任何HTML代码。不必是Vue单选按钮...

在这种情况下，您需要为每个单选按钮创建一个包装器。通常，我建议将输入内容包装在标签内，以使整个内容都可单击。以下示例将为您提供很多样式设置机会。

<label class="radio">
   <input type="radio" name="group"/>
   <span>Label Text</span>
</label>

因此在VUE中，您将需要以下内容：

<label v-for="opt in options" v-bind:key="opt.value">
   <input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
   <span v-html="opt.value"></span>
</label>

浏览器的默认CSS应该呈现如下内容：

[]标签文本

---

现在我有更多时间在这里，这是您可以进行样式设置的方式。

假设您像我一样设法使HTML结构化，则有很多选择。为了使这项工作有效，您将使用adjacent sibling选择器在选中单选按钮时进行更改。另外，由于很难设置样式单选按钮本身，因此我们将其隐藏起来并使用其状态来确定应该发生什么。

.example {
  margin: 20px;
}
.example input {
  display: none;
}
.example label {
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
}

.ex1 span {
  display: block;
  padding: 5px 10px 5px 25px;
  border: 2px solid #ddd;
  border-radius: 5px;
  position: relative;
  transition: all 0.25s linear;
}
.ex1 span:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.25s linear;
}
.ex1 input:checked + span {
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .red input:checked + span {
  color: red;
  border-color: red;
}
.ex1 .red input:checked + span:before {
  background-color: red;
}
.ex1 .blue input:checked + span {
  color: blue;
  border-color: blue;
}
.ex1 .blue input:checked + span:before {
  background-color: blue;
}
.ex1 .orange input:checked + span {
  color: orange;
  border-color: orange;
}
.ex1 .orange input:checked + span:before {
  background-color: orange;
}

<div class="example ex1">
	<h4>Select Color</h4>
	<label class="radio red">
   <input type="radio" name="group1"/>
   <span>Red</span>
	</label>
	<label class="radio blue">
   <input type="radio" name="group1"/>
   <span>Blue</span>
	</label>
	<label class="radio orange">
   <input type="radio" name="group1"/>
   <span>Orange</span>
	</label>
</div>