当前位置：首页 > VUE

vue实现填空题

2026-01-20 22:39:24VUE

Vue实现填空题的基本思路

填空题的实现通常需要结合Vue的数据绑定、事件处理和动态渲染特性。以下是一个基于Vue 2或Vue 3的实现方案。

核心代码实现

模板部分（Template）

<template>
  <div class="fill-blank-container">
    <div v-for="(blank, index) in blanks" :key="index" class="blank-item">
      <span>{{ blank.textBefore }}</span>
      <input 
        v-model="blank.userAnswer" 
        @input="checkAnswer(index)"
        :class="{ correct: blank.isCorrect, incorrect: !blank.isCorrect && blank.userAnswer }"
      />
      <span>{{ blank.textAfter }}</span>
    </div>
    <div v-if="allCorrect" class="feedback">全部正确！</div>
  </div>
</template>

脚本部分（Script）

<script>
export default {
  data() {
    return {
      blanks: [
        {
          textBefore: "Vue是一个",
          textAfter: "框架",
          correctAnswer: "渐进式",
          userAnswer: "",
          isCorrect: false
        },
        {
          textBefore: "Vue的核心特性包括",
          textAfter: "和组件化",
          correctAnswer: "响应式",
          userAnswer: "",
          isCorrect: false
        }
      ],
      allCorrect: false
    };
  },
  methods: {
    checkAnswer(index) {
      const blank = this.blanks[index];
      blank.isCorrect = blank.userAnswer === blank.correctAnswer;
      this.allCorrect = this.blanks.every(b => b.isCorrect);
    }
  }
};
</script>

样式设计建议

<style scoped>
.fill-blank-container {
  font-size: 16px;
  line-height: 2;
}

.blank-item {
  margin-bottom: 10px;
}

input {
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 4px;
}

input.correct {
  border-color: green;
  background-color: #e8f5e9;
}

input.incorrect {
  border-color: red;
  background-color: #ffebee;
}

.feedback {
  color: green;
  font-weight: bold;
  margin-top: 20px;
}
</style>

功能扩展建议

动态生成填空题 可以通过API获取题目数据，实现动态渲染：

async created() {
  try {
    const response = await fetch('/api/fill-blank-questions');
    this.blanks = await response.json();
  } catch (error) {
    console.error('获取题目失败:', error);
  }
}

添加提交按钮

<button @click="submitAll" :disabled="!allFilled">提交答案</button>

添加计分功能

computed: {
  score() {
    return this.blanks.filter(b => b.isCorrect).length;
  },
  total() {
    return this.blanks.length;
  }
}

注意事项

对于需要模糊匹配的答案（如大小写不敏感），可以在检查时统一转为小写：
```
blank.isCorrect = blank.userAnswer.toLowerCase() === blank.correctAnswer.toLowerCase();
```
考虑添加输入提示功能，当用户输入错误时显示正确答案提示。
对于移动端适配，可以增加输入框的点击区域大小。
如果需要保存用户进度，可以使用localStorage存储用户答案。