vue答题

小阳生煎

已于 2024-03-03 18:36:54 修改

阅读量3.2k

点赞数 2

分类专栏： Vue # Vue2 # Vue3 文章标签： vue.js javascript 前端

于 2022-05-26 09:35:11 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/124978655

版权

Vue2 同时被 3 个专栏收录

110 篇文章 4 订阅

订阅专栏

36 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

倒计时功能

效果

在这里插入图片描述

<template>
  <div id="app" class="container text-center mt-5">
    <h1>Countdown Timer</h1>
    <h2>{{ minutes }}分:{{ seconds < 10 ? '0' + seconds : seconds }}秒</h2>
        <button @click="startTimer" class="btn btn-primary mt-3">Start Timer</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minutes: 15,
      seconds: 0,
      timer: null
    }
  },
  created() {
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.minutes === 0 && this.seconds === 0) {
          clearInterval(this.timer);
          alert('Timer finished');
        } else if (this.seconds === 0) {
          this.minutes--;
          this.seconds = 59;
        } else {
          this.seconds--;
        }
      }, 1000);
    }
  }
}
</script>

<style></style>

答题小Demo

效果图

请添加图片描述

vue2

index.css

  * {
      padding: 0;
      box-sizing: border-box;
      font-size: 14px;
  }

  .question {
      margin-top: 50px;
      width: 500px;
      /* height: 200px; */
      background-color: rgb(240, 240, 240);
      border-radius: 10px;
      padding: 20px;
      color: rgb(81, 81, 82);
      font-size: 16px;
  }

  button {
      margin-top: 15px;
      margin-right: 10px;
      outline: none;
      background-color: rgb(255, 153, 98);
      border: 0;
      padding: 10px;
      color: rgb(61, 61, 61);
      border-radius: 5px;
  }

  button:active {
      background-color: rgba(248, 161, 121, 0.664);
  }

  #app {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }

  .title {
      color: black;
      font-weight: 600;
      font-size: 18px;
      height: 30px;
      line-height: 30px;
  }

  .list {

      margin-top: 10px;
      padding: 10px 5px;
      font-size: 16px;
      border: 1px rgb(46, 46, 46) solid;
      border-radius: 10px;
  }

  .bgc {

      border: 1px rgb(250, 109, 0) solid;
      color: aliceblue;
      background-color: rgb(240, 125, 38);
  }

  .answer {
      color: brown;
      font-size: 16px;
      margin-left: 20px;
  }

  .select {
      font-size: 18px;
      color: rgb(243, 25, 25);
  }

index.js

<template>
  <div id="app">
    <div v-for="(item, index) in question" :key="index" v-show="index == idx" class="question">
      <div class="title">
        <span v-if="item.ismultiple" class="select">多选</span>
        <span v-else="item.ismultiple" class="select">单选</span>
        题目：{{ item.name }}
        <span class="answer" v-show="answerShow">答案：{{ item.answer }}</span>
        <span style="float: right;">{{ idx + 1 }}/{{ question.length }}</span>
      </div>
      <div>
        <div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list"
          @click="handleCilck(val)">{{ val.letter }}.
          {{ val.name }}</div>
      </div>
    </div>
    <div>

      <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;' : ''"
        :disabled="idx == 0 ? true : false">上一题</button>
      <button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;' : ''"
        :disabled="idx == question.length - 1 ? true : false">下一题</button>
      <button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;">提交</button>
      <button v-show="isshow" @click="answerShow = true"
        style="background-color: rgb(238, 190, 79);color: rgb(255, 255, 255);">查看答案</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idx: 0,
      allSocre: 0,
      isshow: false,
      answerShow: false,
      ismultipleAnswer: [],
      question: [
        {
          id: 1,
          ismultiple: false,
          name: '今天星期几?',
          answer: 'A',
          score: 2,
          option: [
            {
              id: 1,
              name: '星期一',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '星期三',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '星期四',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 2,
          ismultiple: false,
          name: '你喜欢吃什么?',
          answer: 'C',
          score: 2,
          option: [
            {
              id: 1,
              name: '香蕉',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '苹果',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '橘子',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 3,
          ismultiple: false,
          name: '你的梦想是什么?',
          answer: 'B',
          score: 2,
          option: [
            {
              id: 1,
              name: '当一名程序员',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '当一名测试员',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '当一名运维',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 4,
          ismultiple: true, //是否多选
          name: '这是一题多选吗?',
          answer: 'BC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '不是',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 5,
          ismultiple: true, //是否多选
          name: '是多选吧?',
          answer: 'ABC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '是的',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ],

        },
      ]
    }
  },
  methods: {
    next() {
      this.idx++
    },
    back() {
      this.idx--
    },
    handleCilck(info) {
      let question = this.question[this.idx]  //每题选项
      let option = this.question[this.idx].option //每一题题目的选项

      //选中添加样式
      option.forEach(item => {
        if (item.id == info.id) {  //如果选中的与数据里面的相等就改变他的样式
          item.checked = !item.checked  // 是否选中，取反 
        } else if (!question.ismultiple) {  //如果不是多选 只能选中一个 其他的都为false
          item.checked = false
        }
      });


      let isAnswer = info.letter //选中的答案
      let answer = this.question[this.idx].answer //题目中的答案

      //如果是多选
      if (question.ismultiple) {
        this.ismultipleAnswer = []
        option.forEach(item => {
          if (item.checked) { //将选中的push到 ismultipleAnswer 数组中
            this.ismultipleAnswer.push(item.letter)
          }
        });
        isAnswer = this.ismultipleAnswer.join('')  //将ismultipleAnswer转为字符串 下面与答案比较
      }


      console.log('选中的答案', isAnswer);
      console.log('题目的答案', answer);


      //判断是否选正确，计算分数

      if (isAnswer == answer) { // 如果选的答案与题目答案相等,isOk 说明选对了
        this.question[this.idx].isOk = true
      } else {
        this.question[this.idx].isOk = false
      }

    },

    // 提交计算分数
    sumbit() {
      this.allSocre = 0  //每次计算总分先清0,，在计算
      let result = []  //定义选中的个数
      this.question.forEach(item => {
        //返回是否选中的数组
        let selsetArr = item.option.map(val => {
          if (val.checked) {
            return val.checked //map最终返回一个数组，返回 checked 的数组
          }
        })
        console.log('selsetArr', selsetArr);
        //这边是否包含true，包含 true 就push到result中
        const isTrue = selsetArr.includes(true)  //如果包含返回true,否则返回false
        //这里判断一下,如果 isTrue 是 true，说明包含true 就说明选了
        if (isTrue) {
          result.push(isTrue)  //如果选了，就push到 result 中
        }

        if (item.isOk) { //如果isOK 为 true 说明选了，计算分数
          this.allSocre += item.score
        }
      })
      //用选中 result 的长度  与 题目的长度比较 是否相当 不等就没选完
      if (result.length < this.question.length) {
        alert('还有题目没做呢')
        return
      }

      setTimeout(() => {
        alert('获得分数：' + this.allSocre)
        this.isshow = true
      }, 100);

    }
  }

}
</script>

<style>
@import './home.css';
</style>

vue3

index.css

  * {
      padding: 0;
      box-sizing: border-box;
      font-size: 14px;
  }

  .question {
      margin-top: 50px;
      width: 500px;
      /* height: 200px; */
      background-color: rgb(240, 240, 240);
      border-radius: 10px;
      padding: 20px;
      color: rgb(81, 81, 82);
      font-size: 16px;
  }

  button {
      margin-top: 15px;
      margin-right: 10px;
      outline: none;
      background-color: rgb(255, 153, 98);
      border: 0;
      padding: 10px;
      color: rgb(61, 61, 61);
      border-radius: 5px;
  }

  button:active {
      background-color: rgba(248, 161, 121, 0.664);
  }

  #app {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }

  .title {
      color: black;
      font-weight: 600;
      font-size: 18px;
      height: 30px;
      line-height: 30px;
  }

  .list {

      margin-top: 10px;
      padding: 10px 5px;
      font-size: 16px;
      border: 1px rgb(46, 46, 46) solid;
      border-radius: 10px;
  }

  .bgc {

      border: 1px rgb(250, 109, 0) solid;
      color: aliceblue;
      background-color: rgb(240, 125, 38);
  }

  .answer {
      color: brown;
      font-size: 16px;
      margin-left: 20px;
  }

  .select {
      font-size: 18px;
      color: rgb(243, 25, 25);
  }

index.js

<template>
  <div id="app">
    <div v-for="(item, index) in question" :key="index" v-show="index == idx" class="question">
      <div class="title">
        <span v-if="item.ismultiple" class="select">多选</span>
        <span v-else="item.ismultiple" class="select">单选</span>
        题目：{{ item.name }}
        <span class="answer" v-show="answerShow">答案：{{ item.answer }}</span>
        <span style="float: right;">{{ idx + 1 }}/{{ question.length }}</span>
      </div>
      <div>
        <div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list"
          @click="handleCilck(val)">{{ val.letter }}.
          {{ val.name }}</div>
      </div>
    </div>
    <div>

      <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;' : ''"
        :disabled="idx == 0 ? true : false">上一题</button>
      <button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;' : ''"
        :disabled="idx == question.length - 1 ? true : false">下一题</button>
      <button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;">提交</button>
      <button v-show="isshow" @click="answerShow = true"
        style="background-color: rgb(238, 190, 79);color: rgb(255, 255, 255);">查看答案</button>
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      idx: 0,
      allSocre: 0,
      isshow: false,
      answerShow: false,
      ismultipleAnswer: [],
      question: [
        {
          id: 1,
          ismultiple: false,
          name: '今天星期几?',
          answer: 'A',
          score: 2,
          option: [
            {
              id: 1,
              name: '星期一',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '星期三',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '星期四',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 2,
          ismultiple: false,
          name: '你喜欢吃什么?',
          answer: 'C',
          score: 2,
          option: [
            {
              id: 1,
              name: '香蕉',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '苹果',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '橘子',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 3,
          ismultiple: false,
          name: '你的梦想是什么?',
          answer: 'B',
          score: 2,
          option: [
            {
              id: 1,
              name: '当一名程序员',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '当一名测试员',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '当一名运维',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 4,
          ismultiple: true, //是否多选
          name: '这是一题多选吗?',
          answer: 'BC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '不是',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 5,
          ismultiple: true, //是否多选
          name: '是多选吧?',
          answer: 'ABC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '是的',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ]
          ,
        },
      ],
      next() {
        this.idx++
      },
      back() {
        this.idx--
      },
      handleCilck(info) {
        let question = this.question[this.idx]  //每题选项
        let option = this.question[this.idx].option //每一题题目的选项

        //选中添加样式
        option.forEach(item => {
          if (item.id == info.id) {  //如果选中的与数据里面的相等就改变他的样式
            item.checked = !item.checked  // 是否选中，取反 
          } else if (!question.ismultiple) {  //如果不是多选 只能选中一个 其他的都为false
            item.checked = false
          }
        });


        let isAnswer = info.letter //选中的答案
        let answer = this.question[this.idx].answer //题目中的答案

        //如果是多选
        if (question.ismultiple) {
          this.ismultipleAnswer = []
          option.forEach(item => {
            if (item.checked) { //将选中的push到 ismultipleAnswer 数组中
              this.ismultipleAnswer.push(item.letter)
            }
          });
          isAnswer = this.ismultipleAnswer.join('')  //将ismultipleAnswer转为字符串 下面与答案比较
        }


        console.log('选中的答案', isAnswer);
        console.log('题目的答案', answer);


        //判断是否选正确，计算分数

        if (isAnswer == answer) { // 如果选的答案与题目答案相等,isOk 说明选对了
          this.question[this.idx].isOk = true
        } else {
          this.question[this.idx].isOk = false
        }

      },

      // 提交计算分数
      sumbit() {
        this.allSocre = 0  //每次计算总分先清0,，在计算
        let result = []  //定义选中的个数
        this.question.forEach(item => {
          //返回是否选中的数组
          let selsetArr = item.option.map(val => {
            if (val.checked) {
              return val.checked //map最终返回一个数组，返回 checked 的数组
            }
          })
          console.log('selsetArr', selsetArr);
          //这边是否包含true，包含 true 就push到result中
          const isTrue = selsetArr.includes(true)  //如果包含返回true,否则返回false
          //这里判断一下,如果 isTrue 是 true，说明包含true 就说明选了
          if (isTrue) {
            result.push(isTrue)  //如果选了，就push到 result 中
          }

          if (item.isOk) { //如果isOK 为 true 说明选了，计算分数
            this.allSocre += item.score
          }
        })
        //用选中 result 的长度  与 题目的长度比较 是否相当 不等就没选完
        if (result.length < this.question.length) {
          alert('还有题目没做呢')
          return
        }

        setTimeout(() => {
          alert('获得分数：' + this.allSocre)
          this.isshow = true
        }, 100);

      }

    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped>
@import './index.css';
</style>

答题小Demo( 提交选中所有答案)

在这里插入图片描述

sumbit(){
//增添提交选中答案的方法 如下所示
}

<template>
  <div id="app">
    <div v-for="(item, index) in question" :key="index" v-show="index == idx" class="question">
      <div class="title">
        <span v-if="item.ismultiple" class="select">多选</span>
        <span v-else="item.ismultiple" class="select">单选</span>
        题目：{{ item.name }}
        <span class="answer" v-show="answerShow">答案：{{ item.answer }}</span>
        <span style="float: right;">{{ idx + 1 }}/{{ question.length }}</span>
      </div>
      <div>
        <div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list"
          @click="handleCilck(val)">
          {{ val.letter }}.
          {{ val.name }}
        </div>
      </div>
    </div>
    <div>
      <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;' : ''"
        :disabled="idx == 0 ? true : false">上一题</button>
      <button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;' : ''"
        :disabled="idx == question.length - 1 ? true : false">下一题</button>
      <button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;">提交</button>
      <button v-show="isshow" @click="answerShow = true"
        style="background-color: rgb(238, 190, 79);color: rgb(255, 255, 255);">查看答案</button>
    </div>
  </div>
</template>

<script lang='ts'>
import { Dialog } from 'vant'
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
  name: '',
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      idx: 0,
      allSocre: 0,
      isshow: false,
      answerShow: false,
      ismultipleAnswer: [],
      question: [
        {
          id: 1,
          ismultiple: false,
          name: '今天星期几?',
          answer: 'A',
          score: 2,
          option: [
            {
              id: 1,
              name: '星期一',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '星期三',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '星期四',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 2,
          ismultiple: false,
          name: '你喜欢吃什么?',
          answer: 'C',
          score: 2,
          option: [
            {
              id: 1,
              name: '香蕉',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '苹果',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '橘子',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 3,
          ismultiple: false,
          name: '你的梦想是什么?',
          answer: 'B',
          score: 2,
          option: [
            {
              id: 1,
              name: '当一名程序员',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '当一名测试员',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '当一名运维',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 4,
          ismultiple: true, //是否多选
          name: '这是一题多选吗?',
          answer: 'BC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '不是',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ],

        },
        {
          id: 5,
          ismultiple: true, //是否多选
          name: '是多选吧?',
          answer: 'ABC',
          score: 2,
          option: [ //选项
            {
              id: 1,
              name: '是的',
              checked: false,
              letter: 'A'
            },
            {
              id: 2,
              name: '是的',
              checked: false,
              letter: 'B'
            },
            {
              id: 3,
              name: '是的',
              checked: false,
              letter: 'C'
            },
          ]
          ,
        },
      ],
      result: [],
      personalAnswer: [],
      next() {
        this.idx++
      },
      back() {
        this.idx--
      },
      handleCilck(info) {
        let question = this.question[this.idx]  //每题选项
        let option = this.question[this.idx].option //每一题题目的选项

        //选中添加样式
        option.forEach(item => {
          if (item.id == info.id) {  //如果选中的与数据里面的相等就改变他的样式
            item.checked = !item.checked  // 是否选中，取反 
          } else if (!question.ismultiple) {  //如果不是多选 只能选中一个 其他的都为false
            item.checked = false
          }
        });
        let isAnswer = info.letter //选中的答案
        let answer = this.question[this.idx].answer //题目中的答案
        //如果是多选
        if (question.ismultiple) {
          this.ismultipleAnswer = []
          option.forEach(item => {
            if (item.checked) { //将选中的push到 ismultipleAnswer 数组中
              this.ismultipleAnswer.push(item.letter)
            }
          });
          isAnswer = this.ismultipleAnswer.join('')  //将ismultipleAnswer转为字符串 下面与答案比较
        }
        console.log('选中的答案', isAnswer);
        // console.log('题目的答案', answer);


        //判断是否选正确，计算分数

        if (isAnswer == answer) { // 如果选的答案与题目答案相等,isOk 说明选对了
          this.question[this.idx].isOk = true
        } else {
          this.question[this.idx].isOk = false
        }

      },
      // 提交计算分数
      sumbit() {
        let result = []
        data.question.forEach(item => {
          //返回是否选中的数组
          if (item.ismultiple === false) {
            item.option.map(val => {
              if (val.checked) {
                result.push(val.letter)
              }
            })
          } else {
            let selectedOptions = [];
            item.option.map(val => {
              if (val.checked) {
                selectedOptions.push(val.letter)
              }
            })
            result.push(selectedOptions);
          }

          console.log('selsetArr', result);
        })
      },
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>

<style scoped>
@import './home.css';
</style>

问卷调查

效果图

请添加图片描述

vue2

<template>
  <div class="wrap">
    <div>
      <van-nav-bar title="问卷调查" right-text="提交" right-arrow @click-right="save" />
      <van-notice-bar left-icon="volume-o" text="活动时间: 2023年4月4日 至2023年12月31日  奖品设置: 奖励程序员一个。" />
      <div class="maintext">
        <div class="subject" v-for="(item, i) in questionList" :key="i">
          <div class="question">{{ item.question }}</div>
          <van-radio-group v-if="item.type === 'radio'" v-model="result[i].value">
            <van-radio name="A">{{ item.A }}</van-radio>
            <van-radio name="B">{{ item.B }}</van-radio>
            <van-radio name="C">{{ item.C }}</van-radio>
            <van-radio name="D">{{ item.D }}</van-radio>
          </van-radio-group>
          <van-checkbox-group v-if="item.type === 'checkbox'" v-model="result[i].value">
            <van-checkbox name="A" shape="square">{{ item.A }}</van-checkbox>
            <van-checkbox name="B" shape="square">{{ item.B }}</van-checkbox>
            <van-checkbox name="C" shape="square">{{ item.C }}</van-checkbox>
            <van-checkbox name="D" shape="square">{{ item.D }}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data() {
    return {
      questionList: [
        {
          type: 'radio',
          question: '1、（单选题）选出这学期线性代数课任教',
          A: 'A.周星星',
          B: 'B.蔡徐坤',
          C: 'C.张梁柱',
          D: 'D.梁静茹',
        },
        {
          type: 'checkbox',
          question: '2、(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？',
          A: 'A.茶叶',
          B: 'B.牛粪',
          C: 'C.水果',
          D: 'D.狗屎',
        },
        {
          type: 'radio',
          question: '3、（单选题）你喜欢什么季节？',
          A: 'A.春季',
          B: 'B.夏季',
          C: 'C.秋季',
          D: 'D.冬季',
        },
        {
          type: 'checkbox',
          question: '4、（多选题）四大名著你喜欢哪本？',
          A: 'A.西游记',
          B: 'B.三国演义',
          C: 'C.水浒传',
          D: 'D.红楼梦',
        },
      ],
      result: [],
      personalAnswer: [],
    };
  },
  methods: {
    tree() {
      console.log(this.data, 'datata');
    },
    setResult() {
      let result = []
      if (!this.questionList.length) {
        result = [{}]
      } else {
        for (let i = 0; i < this.questionList.length; i++) {
          if (this.questionList[i].type === 'radio') {
            result.push({ index: i + 1, value: '' })
          } else {
            result.push({ index: i + 1, value: [] })
          }
        }
      }
      console.log('result==>', result)
      this.result = result
    },
    save() {
      this.result.forEach((item) => {
        if (!item.value.length > 0) {
          Dialog({ message: '请把所有题都答完' })
        } else {
          // 多选
          if (item.value.length > 1) {
            this.personalAnswer.push(item.value.toString())
          } else {
            this.personalAnswer.push(item.value)
          }
          console.log('personalAnswer==>', this.personalAnswer)
        }
      })
    },
  },
  mounted() {
    this.tree();
  },
  created() {
    this.setResult()
  }
};
</script>

<style scoped>
.subject {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.van-radio,
.van-checkbox {
  padding-top: 10px;
}
</style>

vue3

<template>
    <div class="main">
        <h6>问卷调查</h6>
        <br>
        <div v-for="(item, index) in questionList" :index="index">
            <!-- 单选 -->
            <div>{{ item.question }}</div>
            <van-radio-group v-if="item.type == 'radio'" v-model="result[index].value">
                <van-radio name="A">{{ item.A }}</van-radio>
                <van-radio name="B">{{ item.B }}</van-radio>
                <van-radio name="C">{{ item.C }}</van-radio>
                <van-radio name="D">{{ item.D }}</van-radio>
            </van-radio-group>
            <br>
            <!-- 多选 -->
            <van-checkbox-group v-if="item.type == 'checkbox'" v-model="result[index].value">
                <van-checkbox name="A">{{ item.A }}</van-checkbox>
                <van-checkbox name="B">{{ item.B }}</van-checkbox>
                <van-checkbox name="C">{{ item.C }}</van-checkbox>
                <van-checkbox name="D">{{ item.D }}</van-checkbox>
            </van-checkbox-group>

        </div>
        <button @click="save">提交</button>
    </div>
</template>

<script lang='ts'>
import { Dialog } from 'vant'
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
export default {
    name: '',
    setup() {
        let router = useRouter(), route = useRoute();
        const data = reactive({
            questionList: [
                {
                    type: 'radio',
                    question: '1、（单选题）选出这学期线性代数课任教',
                    A: 'A.周星星',
                    B: 'B.蔡徐坤',
                    C: 'C.张梁柱',
                    D: 'D.梁静茹',
                },
                {
                    type: 'checkbox',
                    question: '2、(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？',
                    A: 'A.茶叶',
                    B: 'B.牛粪',
                    C: 'C.水果',
                    D: 'D.狗屎',
                },
                {
                    type: 'radio',
                    question: '3、（单选题）你喜欢什么季节？',
                    A: 'A.春季',
                    B: 'B.夏季',
                    C: 'C.秋季',
                    D: 'D.冬季',
                },
                {
                    type: 'checkbox',
                    question: '4、（多选题）四大名著你喜欢哪本？',
                    A: 'A.西游记',
                    B: 'B.三国演义',
                    C: 'C.水浒传',
                    D: 'D.红楼梦',
                },
            ],
            result: [],
            personalAnswer: [],
            setResult() {
                let result = []
                if (!data.questionList.length) {
                    result = [{}]
                } else {
                    for (let i = 0; i < data.questionList.length; i++) {
                        if (data.questionList[i].type === 'radio') {
                            result.push({ index: i + 1, value: '' })
                        } else {
                            result.push({ index: i + 1, value: [] })
                        }
                    }
                }
                console.log('result==>', result)
                data.result = result
            },
            save() {
                data.result.forEach((item) => {
                    // 12121
                    if (!item.value.length) {
                        Dialog({ message: '请把所有题都答完' })
                    } else {
                        // 多选
                        if (item.value.length > 1) {
                            data.personalAnswer.push(item.value.toString())
                        } else {
                            data.personalAnswer.push(item.value)
                        }
                        console.log('personalAnswer==>', data.personalAnswer)
                    }
                })
            },
        })
        onBeforeMount(() => {
            data.setResult()
        })
        onMounted(() => {
            // data.save()
        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
};
</script>

<style scoped>
.main {
    padding: 20px;
}
</style>