Vue3：一页多题答案提示及循环radio和checkbox混合使用

原创

已于 2023-11-07 15:25:12 修改 · 647 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-11-05 12:29:23 首次发布

文章介绍了使用Vue构建一个包含不同类型题目的答题系统，包括数据获取、答案检验、格式转换和提交功能的实现过程。

一页多题，类型包括单选（单选、判断）和多选，radio和checkbox混合使用，答案检验数据匹配，正确答案格式化，答案提交数据格式化，数据提交。

效果：

数据获取：

数据提交：

HTML：

<template>

<!--其他HTML结构-->

<ul class="question f16">
  <li v-for="(list,index) in questionData" :key="index">
    <h5>{
  
  {list.type}}题</h5>
    <h6 v-if="isScoreTxt">
      <b :class="{daanErr:list.scoreTxt !='正确'}" v-if="list.scoreTxt !='正确'">正确选项是：{
  
  {list.scoreTxt}}</b>
      <b v-else>{
  
  {list.scoreTxt}}</b>
    </h6>
    
    <!--单选及判断-->
    <dl v-if="list.type != '多选'">
      <dt v-html="list.title"></dt>
      <dd>
        <label v-for="(radio,id) in list.xuanxiang" :key="id">
          <input type="radio" :name="list.id" :value="list.id+'_'+radio.name" v-model="radioData[list.id]">
          <span><b>{
  
  {radio.name}}</b>{
  
  {radio.content}}</span>
        </label>
      </dd>
    </dl>

    <!--多选-->
    <dl v-else>
      <dt v-html="list.title"></dt>
      <dd>