uniapp问卷调查(单选)

前言

该代码片段只支持问卷调查的单选功能

使用组件库

配置 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

代码

javascript 复制代码
<template>  
  <view>  
    <view v-for="(item, index) in radiolist1" :key="index">  
      <view>{{ item.title }}</view>  
      <u-radio-group v-model="selectedValues[index]" placement="column">  
        <u-radio  
          v-for="(aitem, aindex) in item.option"  
          :key="aindex"  
          :label="aitem.value"  
          :name="aitem.name"  
        ></u-radio>  
      </u-radio-group>  
    </view>  
    <view>  
      <button @click="onSumbit">点击获取到这个值</button>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      radiolist1: [  
        {  
		  id:1,
          title: '这是第一题',  
          option: [  
            { name: '选项一', value: '选项一' },  
            { name: '选项二', value: '选项二' },  
            { name: '选项三', value: '选项三' },  
          ],  
        },  
        {  
		  id:2,
          title: '这是第二题',  
          option: [  
            { name: '选项一', value: '选项一' },  
            { name: '选项二', value: '选项二' },  
            { name: '选项三', value: '选项三' },  
          ],  
        },  
      ],  
      selectedValues: [], // 初始化一个空数组来存储每个radio-group的选中状态  
    };  
  },  
  created() {  
    // 在组件创建时,初始化selectedValues数组的长度与radiolist1相同,并将每个元素设置为空字符串  
    this.selectedValues = this.radiolist1.map(() => '');  
  },  
  methods: {  
    onSumbit() {  
      console.log(this.selectedValues, 'this.selectedValues'); // 输出每个radio-group的选中状态  
    },  
  },  
};  
</script>

效果图

结束语

如果需要多选和填空,可以根据,类型判断是填空还是多选,选择不同的组件来渲染即可!

有什么不足的地方,请大家多多指教!点个赞啦!

相关推荐
凌晨一点的程序员14 分钟前
antd中的表格穿梭框(Transfer)如何使用
前端·javascript·html·react·antd·transfer
^小桃冰茶1 小时前
HTML 从标签到动态效果的基础
前端·html
火柴盒zhang1 小时前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
一城烟雨_6 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想6 小时前
调整vscode的插件安装位置
前端·cursor
漫 漫,7 小时前
基于Node+HeadlessBrowser的浏览器自动化方案
前端框架
低代码布道师7 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧8 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信8 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子8 小时前
CSS单位完全指南
前端·css