uniapp的radio怎么赋值

uniapp 的 radio 怎么赋值

UniApp 是一个跨平台开发框架，开发者可以使用 UniApp 来开发多端应用程序，包括 H5、小程序、APP 等。在 UniApp 中，Radio 是一种常用的表单控件，用于多项选择，但在使用 Radio 时，可能会需要对 Radio 进行赋值。

Radio 的基本用法

在 UniApp 中使用 Radio 控件非常简单。首先，在页面中引入 Radio 并定义 Radio 的选项：

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

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  }
}
</script>

以上代码中，通过 <radio-group> 标签定义 Radio 的组，并通过 v-model 绑定选中项的值。然后，使用 <radio> 标签定义 Radio 的选项，并通过 v-for 循环遍历选项列表，使用 :value 属性来为选项赋值。

这样，当用户选择其中一项时，selected 中就会存储该选项的值。

Radio 的赋值

歌者PPT

歌者PPT，AI 写 PPT 永久免费

下载

当需要对 Radio 进行赋值时，我们可以在组件加载时，通过代码动态地将 selected 的值进行修改，从而修改默认选中的 Radio 选项。假设我们需要将默认选中的选项设置为 “选项2”。则需要在组件加载时，将 selected 的值赋为 “2”：

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

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  },
  created() {
    this.selected = '2';
  }
}
</script>

以上代码中，通过在 created 生命周期函数中将 selected 的值赋为 “2”，就可以将默认选中项设置为 “选项2”。

需要注意的是，当 v-model 绑定的值发生变化时，Radio 也会相应地更新选项。因此，在修改 selected 的值时，要确保新值在选项列表中存在，否则 Radio 不会有任何选项被选中。

总结

通过以上的简单示例，我们可以看到，使用 UniApp 中的 Radio 控件是非常容易的，而且我们也可以通过简单的代码修改来实现 Radio 的赋值。希望以上内容能帮助大家更好地使用 UniApp 中的 Radio 控件。