uni-app radio-group组件

在uni-app中，radio-group组件用于创建单选按钮组，允许用户在一组选项中选择一个。每个选项由一个radio组件表示。以下是一个使用radio-group组件的示例代码，展示了如何在uni-app中实现单选功能。

示例代码

1. 页面结构（template）

<template>
  <view class="container">
    <radio-group @change="radioChange">
      <label v-for="(item, index) in options" :key="index" class="radio-label">
        <radio :value="item.value">{{ item.text }}</radio>
      </label>
    </radio-group>
    <view class="result">
      您选择的选项是: {{ selectedValue }}
    </view>
  </view>
</template>

2. 脚本部分（script）

<script>
export default {
  data() {
    return {
      options: [
        { text: '选项1', value: 'option1' },
        { text: '选项2', value: 'option2' },
        { text: '选项3', value: 'option3' }
      ],
      selectedValue: ''
    };
  },
  methods: {
    radioChange(e) {
      this.selectedValue = e.detail.value;
    }
  }
};
</script>

3. 样式部分（style）

<style>
.container {
  padding: 20px;
}

.radio-label {
  margin-bottom: 10px;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
</style>

说明

• template部分：使用radio-group组件包裹一组radio组件，每个radio组件通过v-for指令循环生成，绑定对应的value和显示文本text。radio-group组件的@change事件监听用户选择的变化。
• script部分：在data函数中定义了一个选项数组options和一个用于存储用户选择值的变量selectedValue。radioChange方法用于处理radio-group的change事件，更新selectedValue的值。
• style部分：简单的样式定义，用于美化页面布局。

这个示例展示了如何在uni-app中使用radio-group和radio组件实现单选功能，并通过事件监听获取用户的选择。在实际项目中，你可以根据需求调整选项的内容和样式。