uniapp如何利用单选框（radio）替代多选框（checkbox）

uniapp开发中，有时候需要单选框radio代替多选框checkbox功能，下面编程教程网小编给大家简单介绍一下如何利用radio和radio-group组件实现这个功能。

具体示例如下：

<template>
  <view>
    <radio-group @change="radioChange">
      <radio v-for="item in radioList" :key="item.id" :value="item.checked">
        {{ item.label }}
      </radio>
    </radio-group>
    <button @click="getSelectedId">
      获取选中的id
    </button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        radioList:[
        {
          id:1,
          label: '选项1',
          checked: false
        },
        {
          id: 2,
          label: '选项2',
          checked: false
        },
        {
          id: 3,
          label: '选项3',
          checked: false
        }],
        selectedId: ''
      };
    },
    methods: {
      radioChange(value) {
        this.selectedId = value;
      },
      getSelectedId() {
        console.log('选中的id:', this.selectedId);
      }
    }
  };
</script>

以上是编程学习网小编为您介绍的“uniapp如何利用单选框（radio）替代多选框（checkbox）”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。