【vue填空题功能双版本】js简单实现填空题功能，可勾选并输入的填空功能，完形填空，可自由控制填空位置，段落中可加多个填空，可以保存回显数据【详细注释】

<template>
  <div>
    <div v-for="(question, index) in questions" :key="index">
      <p>{{ index + 1 }}. {{ question.stem }}</p>
      <div v-if="question.type === 'single'">
        <label v-for="(option, idx) in question.options" :key="idx">
          <input
            type="radio"
            :name="`question-${index}`"
            :value="option"
            v-model="question.answer"
          />
          {{ option }}
        </label>
      </div>
      <div v-else-if="question.type === 'multiple'">
        <label v-for="(option, idx) in question.options" :key="idx">
          <input
            type="checkbox"
            :name="`question-${index}`"
            :value="option"
            v-model="question.answer"
          />
          {{ option }}
        </label>
      </div>
      <div v-else-if="question.type === 'gapfill'">
        <input
          type="text"
          v-for="(gap, idx) in question.gaps"
          :key="idx"
          v-model="question.answer[idx]"
        />
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      questions: [
        {
          stem: '下面哪个国家是非洲的？',
          type: 'single',
          options: ['中国', '南非', '埃及', '埃塞俄'],
          answer: null,
        },
        {
          stem: '这是一个多选题，下面哪些是非洲国家？',
          type: 'multiple',
          options: ['中国', '南非', '埃及', '埃塞俄'],
          answer: [],
        },
        {
          stem: '完形填空题，非洲的国家有：',
          type: 'gapfill',
          gaps: ['____', '____', '____', '____'],
          answer: ['埃及', '埃塞俄', '埃塞维亚', '南非'],
        },
      ],
    };
  },
};
</script>

这段代码实现了简单的填空题功能，可以根据题目类型（单选、多选、完形填空）显示相应的输入框。每个问题都绑定了正确答案，可以根据需要进一步完善，例如添加判断答案正确与否的逻辑，计算分数等。