vue实现填空

Vue 实现填空功能的方法

在 Vue 中实现填空功能可以通过多种方式完成，以下是几种常见的实现方法：

使用双向绑定和计算属性

利用 Vue 的 v-model 实现填空内容的双向绑定，结合计算属性验证填空结果：

<template>
  <div>
    <p>请填空：{{ question }}</p>
    <input v-model="userAnswer" placeholder="请输入答案">
    <p v-if="isCorrect">回答正确！</p>
    <p v-else>回答错误，请再试一次</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: 'Vue 是一个 __ 框架',
      correctAnswer: '前端',
      userAnswer: ''
    }
  },
  computed: {
    isCorrect() {
      return this.userAnswer === this.correctAnswer
    }
  }
}
</script>

动态渲染填空位置

使用 Vue 的插值和条件渲染动态显示填空位置和用户输入：

<template>
  <div>
    <p>请填空：{{ questionPart1 }}<input v-model="userAnswer">{{ questionPart2 }}</p>
    <button @click="checkAnswer">提交</button>
    <p>{{ feedback }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionPart1: 'Vue 是一个 ',
      questionPart2: ' 框架',
      correctAnswer: '前端',
      userAnswer: '',
      feedback: ''
    }
  },
  methods: {
    checkAnswer() {
      this.feedback = this.userAnswer === this.correctAnswer 
        ? '回答正确！' 
        : '回答错误，正确答案是：' + this.correctAnswer
    }
  }
}
</script>

多填空题实现

对于多个填空题的情况，可以使用数组和循环来管理：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      <p>{{ item.textBefore }}<input v-model="item.userAnswer">{{ item.textAfter }}</p>
    </div>
    <button @click="checkAll">检查所有答案</button>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          textBefore: 'Vue 是一个 ',
          textAfter: ' 框架',
          correctAnswer: '前端',
          userAnswer: ''
        },
        {
          textBefore: 'Vue 的核心特性包括 ',
          textAfter: ' 和组件化',
          correctAnswer: '响应式',
          userAnswer: ''
        }
      ],
      result: ''
    }
  },
  methods: {
    checkAll() {
      const allCorrect = this.questions.every(q => q.userAnswer === q.correctAnswer)
      this.result = allCorrect ? '全部正确！' : '部分答案错误'
    }
  }
}
</script>

填空题自动评分

实现一个自动评分的填空系统，可以统计正确率：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      <p>{{ item.textBefore }}<input v-model="item.userAnswer">{{ item.textAfter }}</p>
    </div>
    <button @click="calculateScore">计算分数</button>
    <p>得分：{{ score }} / {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        { textBefore: 'Vue 由 ', textAfter: ' 团队维护', correctAnswer: '尤雨溪', userAnswer: '' },
        { textBefore: 'Vue 最新版本是 ', textAfter: '', correctAnswer: '3', userAnswer: '' }
      ],
      score: 0,
      total: 2
    }
  },
  methods: {
    calculateScore() {
      this.score = this.questions.reduce((acc, curr) => {
        return acc + (curr.userAnswer === curr.correctAnswer ? 1 : 0)
      }, 0)
    }
  }
}
</script>

这些方法可以根据实际需求进行调整和组合，实现各种复杂的填空功能。对于更高级的需求，还可以考虑使用 Vue 的动态组件、插槽等特性来增强填空功能的灵活性和复用性。