Vue 如何实现填空题

在 Vue 开发中，实现填空题功能能够为用户提供交互性更强的体验。下面我们来探讨一下具体的实现方法。

我们需要创建一个 Vue 项目。可以使用 Vue CLI 快速搭建项目框架。在项目的 src 目录下，找到 App.vue 文件，这将是我们实现填空题功能的主要场所。

在 App.vue 的模板部分，我们可以使用 HTML 标签来构建填空题的界面。例如：

<template>
  <div id="app">
    <p>请在横线处填空：{{ sentence.split('____')[0] }}</p>
    <input v-model="userAnswer" placeholder="请输入答案">
    <button @click="checkAnswer">提交答案</button>
    <p v-if="isCorrect">回答正确！</p>
    <p v-if="!isCorrect && isSubmitted">回答错误，正确答案是：{{ correctAnswer }}</p>
  </div>
</template>

这里，我们将填空题的句子进行了拆分，通过 v-model 指令将用户输入的值绑定到 userAnswer 数据属性上。提交按钮绑定了 checkAnswer 方法，用于检查用户答案是否正确。

接着，在 script 部分，我们定义数据和方法：

<script>
export default {
  data() {
    return {
      sentence: "今天天气很____",
      userAnswer: "",
      correctAnswer: "好",
      isCorrect: false,
      isSubmitted: false
    };
  },
  methods: {
    checkAnswer() {
      this.isSubmitted = true;
      if (this.userAnswer === this.correctAnswer) {
        this.isCorrect = true;
      } else {
        this.isCorrect = false;
      }
    }
  }
};
</script>

在 data 中定义了填空题的句子、正确答案、用户输入答案以及用于判断回答结果的变量。checkAnswer 方法在用户点击提交按钮时被调用，它首先将 isSubmitted 设置为 true，然后判断用户输入的答案是否与正确答案一致，从而设置 isCorrect 的值。

最后，在 style 部分，我们可以对界面进行简单的样式设计，使其更加美观：

<style scoped>
  button {
    margin-top: 10px;
  }
</style>

通过以上步骤，我们就利用 Vue 成功实现了一个简单的填空题功能。开发者还可以根据实际需求，进一步扩展和优化这个功能，比如增加更多的填空题题目、实现随机出题等，为用户带来更丰富的交互体验。