uniapp 中radio

uniapp 中的 radio 组件是用于单选的组件，可以在一组选项中选择一个选项。使用 radio 组件需要设置 v-model 绑定选中的值，同时设置 radio-group 的值为选项数组。

示例代码：

<template>
  <view>
    <radio-group v-model="selected">
      <radio :value="1">选项1</radio>
      <radio :value="2">选项2</radio>
      <radio :value="3">选项3</radio>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: 1
    }
  }
}
</script>

相关问题

uniapp 中radio单选

在uniapp中，可以使用`<radio>`标签来实现单选功能。具体使用方法如下：

1. 在`<template>`中添加`<radio>`标签，设置`name`属性和`value`属性，分别表示单选框的名称和值。

<template>
  <view>
    <radio name="gender" value="male">男</radio>
    <radio name="gender" value="female">女</radio>
  </view>
</template>

2. 在`<script>`中添加`data`属性，用于存储单选框的值。

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

3. 在`<radio>`标签中添加`@click`事件，将选中的值赋给`data`中的变量。

template>
  <view>
    <radio name="gender" value="male" @click="gender='male'">男</radio>
    <radio name="gender" value="female" @click="gender='female'">女</radio>
  </view>
</template>

uniapp中radio默认样式怎么取消？

你可以在样式中设置 `uni-radio` 组件的 `appearance:none` 属性来取消其默认样式，如下所示：

uni-radio {
  appearance: none;
}

另外，你还可以根据自己的需求，对 `uni-radio` 组件进行自定义样式。例如，定义一个新的类名 `.my-radio`，然后在样式中设置该类名的样式：

.my-radio input[type="radio"] {
  /* 取消默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 自定义样式 */
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.my-radio input[type="radio"]:checked:after {
  /* 选中样式 */
  content: "\2713";
  display: block;
  color: #fff;
  background-color: #007aff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  margin: 2px;
}

然后在 `uni-radio` 组件上添加 `class` 属性，值为 `my-radio`，即可应用自定义样式：

<uni-radio class="my-radio" value="1">选项1</uni-radio>
<uni-radio class="my-radio" value="2">选项2</uni-radio>
<uni-radio class="my-radio" value="3">选项3</uni-radio>