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

uniapp开发中，有时候需要单选框radio代替多选框checkbox功能，下面web建站小编给大家简单介绍一下如何利用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开发微信小程序提示“启动组件按需注入未通过”解决方法

uniapp开发axios接口调用解决跨域问题（只需4步）

uniapp如何实现扫码枪自带条码读取功能（附vue.js具体代码）

uniapp打包后，打开app有忽略版本检查提示框解决方法

css美化input-checkbox多选框代码

标签： checkbox多选框, radio单选框, uniapp开发

上面是“uniapp如何利用单选框（radio）替代多选框（checkbox）”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_11930.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！