Uniapp 中 Radio 如何赋值

在 Uniapp 开发过程中，合理为 Radio 赋值是一项常见需求，它对于实现用户交互和数据处理有着重要意义。接下来，我们就详细探讨一下在 Uniapp 里如何为 Radio 赋值。

在 Uniapp 中创建 Radio 组件十分简单。我们在页面的模板（template）部分添加 Radio 组件，代码大致如下：

<template>
  <view>
    <radio-group v-model="radioValue">
      <label v-for="(item, index) in radioOptions" :key="index">
        <radio :value="item.value">{{item.label}}</radio>
      </label>
    </radio-group>
  </view>
</template>

上述代码里，我们使用 radio-group 包裹多个 radio 选项，v-model 绑定到名为 radioValue 的数据变量上，radioOptions 是一个包含所有 Radio 选项的数组，每个选项有 value 和 label 属性。

然后，要为 Radio 赋值，我们可以在 script 部分进行操作。在 data 函数里定义 radioValue 和 radioOptions：

<script>
export default {
  data() {
    return {
      radioValue: '',
      radioOptions: [
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' }
      ]
    };
  }
};
</script>

这里将 radioValue 初始化为空字符串。若要给 Radio 赋初始值，只需要修改 radioValue 的初始值，例如：

data() {
  return {
    radioValue: 'option1',
    radioOptions: [
      { value: 'option1', label: '选项一' },
      { value: 'option2', label: '选项二' }
    ]
  };
}

这样页面加载时，“选项一”对应的 Radio 就会被选中。

另外，在实际开发中，我们可能需要动态为 Radio 赋值。比如通过接口获取数据后，根据业务逻辑为 Radio 赋值。我们可以在方法里通过修改 radioValue 来实现：

methods: {
  setRadioValue() {
    // 假设从接口获取到的数据决定要设置的值
    const valueFromApi = 'option2';
    this.radioValue = valueFromApi;
  }
}

通过调用 setRadioValue 方法，就能动态地为 Radio 赋值。掌握 Uniapp 中 Radio 的赋值方法，能让我们在开发过程中更加灵活地处理用户输入和页面交互，提升应用的用户体验和功能完整性。