当前位置：首页 > VUE

vue实现填空

2026-02-10 02:50:00VUE

Vue 实现填空题功能

在 Vue 中实现填空题功能可以通过数据绑定和事件处理来完成。以下是一个简单的实现方法：

模板部分

<template>
  <div>
    <p>请填空：{{ sentenceBefore }} ______ {{ sentenceAfter }}</p>
    <input v-model="userAnswer" @input="checkAnswer" />
    <p v-if="showFeedback">{{ feedback }}</p>
  </div>
</template>

脚本部分

vue实现填空

<script>
export default {
  data() {
    return {
      sentenceBefore: "Vue是一个",
      sentenceAfter: "框架",
      correctAnswer: "前端",
      userAnswer: "",
      feedback: "",
      showFeedback: false
    }
  },
  methods: {
    checkAnswer() {
      if (this.userAnswer === this.correctAnswer) {
        this.feedback = "回答正确！";
      } else {
        this.feedback = "回答错误，请再试一次";
      }
      this.showFeedback = true;
    }
  }
}
</script>

动态生成填空题

如果需要从数据动态生成填空题：

data() {
  return {
    questions: [
      {
        before: "Vue的核心是",
        after: "响应式数据绑定",
        answer: "双向"
      },
      {
        before: "Vue使用",
        after: "语法扩展HTML",
        answer: "模板"
      }
    ],
    currentQuestion: 0,
    userAnswer: ""
  }
}

样式美化

可以添加一些CSS美化填空题：

vue实现填空

<style>
input {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}
.correct {
  color: green;
}
.incorrect {
  color: red;
}
</style>

填空题验证逻辑

更完善的验证逻辑可以包含：

methods: {
  validateAnswer() {
    const trimmedAnswer = this.userAnswer.trim().toLowerCase();
    const correct = this.questions[this.currentQuestion].answer.toLowerCase();

    if (trimmedAnswer === correct) {
      // 正确答案处理
    } else {
      // 错误答案处理
    }
  }
}

多空填空题实现

对于需要填写多个空的题目：

<template>
  <div v-for="(blank, index) in blanks" :key="index">
    <span>{{ blank.before }}</span>
    <input v-model="blank.userAnswer" />
    <span>{{ blank.after }}</span>
  </div>
</template>

以上方法提供了Vue实现填空题的基本思路，可以根据实际需求进行调整和扩展。

标签: vue