给单选框加入样式

要给单选框加入样式，可以使用 CSS 来设置样式。下面是一个例子：

<template>
  <div>
    <label v-for="option in options" :key="option.value" class="radio-label">
      <input type="radio" :value="option.value" v-model="selectedOption" class="radio-input" @click="toggleSelected(option)" />
      <span class="radio-text">{{ option.label }}</span>
    </label>
  </div>
</template>

<style>
.radio-label {
  display: block;
  margin-bottom: 10px;
}

.radio-input {
  display: none;
}

.radio-text {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2;
}

.radio-text:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: white;
}

.radio-input:checked + .radio-text:before {
  background-color: #007bff;
  border-color: #007bff;
}

.radio-input:focus + .radio-text:before {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
</style>

在上面的示例中，我们使用了 CSS 来设置单选框的样式。我们将单选框的样式分成了三个部分：

1. `.radio-label`：用来设置单选框的外部标签的样式，使得每个单选框都能被单独包裹。
2. `.radio-input`：用来设置单选框的样式，将其隐藏，并通过 `:checked` 选择器来设置选中状态下的样式。
3. `.radio-text`：用来设置单选框文本的样式，并使用 `:before` 伪元素来添加一个圆形的图标，表示选中状态。

通过上面的 CSS 样式设置，我们可以实现一个美观的单选框样式。