uni-app教程bug：vue语法vue2基础中uni-app表单组件的表单元素radio应用radio-group组件代替e.target.value

在uni-app中使用表单组件时，特别是处理单选按钮（radio）时，通常会结合radio-group组件来管理多个radio元素。相比直接使用e.target.value来获取选中的值，使用radio-group的@change事件可以更方便地获取到选中的值。这是因为radio-group组件会封装好内部radio的选中状态，并直接通过事件对象传递出来。

以下是一个使用radio-group和radio组件的简单示例，展示了如何在uni-app中实现单选按钮的功能，并获取选中的值：

<template>
  <view class="container">
    <radio-group @change="handleRadioChange">
      <label v-for="(item, index) in radioList" :key="index">
        <radio :value="item.value">{{ item.text }}</radio>
      </label>
    </radio-group>
    <view>选中的值: {{ selectedValue }}</view>
  </view>
</template>

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

<style scoped>
.container {
  padding: 20px;
}
label {
  display: block;
  margin: 10px 0;
}
</style>

在这个示例中：

1. radio-group组件包含了多个radio元素，每个radio元素通过v-for指令循环生成，绑定到radioList数组。
2. radioList数组包含了单选按钮的选项，每个选项有value和text属性。
3. 当用户选择一个单选按钮时，radio-group的@change事件被触发，handleRadioChange方法被调用。
4. handleRadioChange方法接收一个事件对象，该对象包含一个detail属性，其中value属性即为选中的单选按钮的值。
5. 将选中的值赋给selectedValue数据属性，以便在页面上显示。

这种方法避免了直接使用e.target.value，而是利用了radio-group组件提供的事件机制，使得代码更加简洁和易于维护。