vue 单选框选中颜色修改

可以通过修改选中状态下的样式来改变单选框选中颜色。以下是一种实现方法：

HTML代码：

<div id="app">
  <label>
    <input type="radio" name="color" value="red" v-model="selectedColor">
    <span class="radio-btn"></span>
    Red
  </label>
  <label>
    <input type="radio" name="color" value="blue" v-model="selectedColor">
    <span class="radio-btn"></span>
    Blue
  </label>
  <label>
    <input type="radio" name="color" value="green" v-model="selectedColor">
    <span class="radio-btn"></span>
    Green
  </label>
</div>

CSS代码：

.radio-btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

input[type="radio"]:checked + .radio-btn {
  background-color: #007bff;
}

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    selectedColor: ''
  }
})

在上面的代码中，我们使用了一个 `span` 元素来模拟单选框的样式，并且通过 `v-model` 指令将选中的值绑定到 `selectedColor` 变量上。在 CSS 中，我们通过修改 `input[type="radio"]:checked + .radio-btn` 的背景颜色来改变选中状态下的颜色。