动态生成单选+多选+获得选择的答案

最新推荐文章于 2023-12-01 16:09:35 发布

一个前端女子

最新推荐文章于 2023-12-01 16:09:35 发布

阅读量1.7k

点赞数

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44173499/article/details/123150716

版权

本文介绍如何使用Vue.js实现动态生成单选题和多选题，并详细说明了如何获取用户的选择答案。通过代码示例展示了具体的实现过程。

摘要由CSDN通过智能技术生成

动态生成单选+多选+获得选择的答案

代码：

Markup

<template>
    <div class='wrap'>
        <!-- 头部 -->
        <div class="header">
            <mt-header title="驾驶员考试">
                <router-link to="/examlogin" slot="left">
                    <mt-button icon="back" @click="back">返回</mt-button>
                </router-link>
            </mt-header>
        </div>
        <!-- 标题 -->
        <div class="title">
            <h4>驾驶员考试</h4>
        </div>
        <div class="sub-tit">
             <mt-field 
                disabled
                label="姓名" 
                v-model="postData.driverName">
            </mt-field>
            <mt-field 
                disabled
                label="考试时间"  
                v-model="isDate">

            </mt-field>

        </div>
        <hr>
        <!-- 试卷内容 -->
        <main class="content">
            <!-- 单选框列表 -->
            <div class="single-choice">
                <p class="theme">一、单选题<span class="sub"></span></p>
                <div v-for="(itemA,index) in isSingle">
                    <p class="tit">{
  {index|plus}}{
  {'.'+itemA.subject}}<span>({
  {itemA.score}}分)</span></p> 
                    <el-radio-group 
                    v-model="radio[index]" 
                    style="display:flex; 
                    flex-direction: column;
                    padding-left: 8px;"
                    >
                        <el-radio 
                        v-for="item in itemA.content" 
                        :label="item.value" 
                        :key="item.value" 
                        style="padding-top: 8px;"
                        @change=" signleHandleChange($event,itemA,item.item)"
                        >
                        {
  {item.label}}
                        </el-radio>

                    </