vue实现填空

Vue 实现填空功能的方法

使用 v-model 绑定输入框

在 Vue 中，可以通过 v-model 指令实现双向数据绑定，用于填空功能的输入框。以下是一个基本示例：

<template>
  <div>
    <input v-model="answer" placeholder="请输入答案">
    <p>你的答案是：{{ answer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      answer: ''
    }
  }
}
</script>

动态生成填空题目

如果需要动态生成填空题，可以使用 v-for 循环渲染多个填空输入框，并绑定到数组中的不同项：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      <p>{{ item.text }}</p>
      <input v-model="item.answer" placeholder="填空">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        { text: '问题1：Vue 是一个 ___ 框架', answer: '' },
        { text: '问题2：Vue 的核心特性是 ___', answer: '' }
      ]
    }
  }
}
</script>

填空题验证

可以添加验证逻辑，检查用户是否填写了所有空：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      <p>{{ item.text }}</p>
      <input v-model="item.answer" placeholder="填空">
      <span v-if="showError && !item.answer" style="color: red">请填写此空</span>
    </div>
    <button @click="checkAnswers">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showError: false,
      questions: [
        { text: '问题1：Vue 是一个 ___ 框架', answer: '' },
        { text: '问题2：Vue 的核心特性是 ___', answer: '' }
      ]
    }
  },
  methods: {
    checkAnswers() {
      this.showError = true
      const allFilled = this.questions.every(item => item.answer.trim() !== '')
      if (allFilled) {
        alert('提交成功！')
      }
    }
  }
}
</script>

填空题自动评分

可以根据预设答案自动评分：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      <p>{{ item.text }}</p>
      <input v-model="userAnswers[index]" placeholder="填空">
      <span v-if="showResult">
        {{ item.correctAnswer === userAnswers[index] ? '✓' : '✗' }}
      </span>
    </div>
    <button @click="showResult = true">查看结果</button>
    <p v-if="showResult">得分：{{ score }}/{{ questions.length }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showResult: false,
      userAnswers: [],
      questions: [
        { text: '问题1：Vue 是一个 ___ 框架', correctAnswer: '前端' },
        { text: '问题2：Vue 的核心特性是 ___', correctAnswer: '响应式' }
      ]
    }
  },
  computed: {
    score() {
      return this.questions.reduce((total, item, index) => {
        return total + (item.correctAnswer === this.userAnswers[index] ? 1 : 0)
      }, 0)
    }
  },
  created() {
    this.userAnswers = new Array(this.questions.length).fill('')
  }
}
</script>

填空题样式优化

可以使用 CSS 美化填空题：

<template>
  <div class="fill-blank-container">
    <div v-for="(item, index) in questions" :key="index" class="question-item">
      <p>{{ item.text.replace('___', '<span class="blank"></span>') }}</p>
      <input v-model="userAnswers[index]" class="blank-input">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userAnswers: [],
      questions: [
        { text: '问题1：Vue 是一个 ___ 框架', correctAnswer: '前端' },
        { text: '问题2：Vue 的核心特性是 ___', correctAnswer: '响应式' }
      ]
    }
  },
  created() {
    this.userAnswers = new Array(this.questions.length).fill('')
  }
}
</script>

<style>
.fill-blank-container {
  max-width: 600px;
  margin: 0 auto;
}
.question-item {
  margin-bottom: 20px;
}
.blank {
  display: inline-block;
  min-width: 100px;
  border-bottom: 1px solid #333;
  margin: 0 5px;
}
.blank-input {
  border: none;
  border-bottom: 1px solid #333;
  padding: 5px;
  width: 100px;
}
</style>

这些方法可以根据实际需求组合使用，实现各种复杂的填空功能。