vue实现多填空

实现多填空功能的基本思路

在Vue中实现多填空功能，可以通过动态生成输入框并绑定数据来实现。核心是利用v-for指令遍历填空位置，结合v-model进行双向数据绑定。

基础实现方法

创建Vue实例，定义填空数据数组。模板中使用v-for循环生成输入框，每个输入框绑定到数组对应项。

<template>
  <div>
    <p>请填空：{{ sentenceParts[0] }} <input v-model="answers[0]"> {{ sentenceParts[1] }} <input v-model="answers[1]"> {{ sentenceParts[2] }}</p>
    <button @click="checkAnswers">检查答案</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sentenceParts: ['Vue是', '开发的', '框架'],
      answers: ['', ''],
      correctAnswers: ['渐进式', '前端']
    }
  },
  methods: {
    checkAnswers() {
      this.answers.forEach((answer, index) => {
        if (answer === this.correctAnswers[index]) {
          console.log(`第${index + 1}空正确`);
        } else {
          console.log(`第${index + 1}空错误`);
        }
      });
    }
  }
}
</script>

动态生成填空

对于更灵活的场景，可以动态解析包含填空标记的文本，自动生成填空位置。

<template>
  <div>
    <div v-html="processedText"></div>
    <button @click="checkAnswers">提交答案</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: 'Vue是__1__开发的__2__框架',
      answers: {},
      correctAnswers: {1: '渐进式', 2: '前端'}
    }
  },
  computed: {
    processedText() {
      let parts = this.originalText.split(/(__\d+__)/g);
      return parts.map(part => {
        if (part.match(/__\d+__/)) {
          const num = part.replace(/_/g, '');
          return `<input v-model="answers['${num}']">`;
        }
        return part;
      }).join('');
    }
  },
  methods: {
    checkAnswers() {
      Object.keys(this.correctAnswers).forEach(key => {
        if (this.answers[key] === this.correctAnswers[key]) {
          console.log(`填空${key}正确`);
        } else {
          console.log(`填空${key}错误`);
        }
      });
    }
  }
}
</script>

使用组件封装

对于复杂场景，可以创建专门的填空组件提高复用性。

<template>
  <fill-blank :text="questionText" :answers="correctAnswers" @submit="handleSubmit" />
</template>

<script>
import FillBlank from './FillBlank.vue';

export default {
  components: { FillBlank },
  data() {
    return {
      questionText: 'Vue是__1__开发的__2__框架',
      correctAnswers: {1: '渐进式', 2: '前端'}
    }
  },
  methods: {
    handleSubmit(userAnswers) {
      Object.keys(this.correctAnswers).forEach(key => {
        if (userAnswers[key] === this.correctAnswers[key]) {
          console.log(`填空${key}正确`);
        }
      });
    }
  }
}
</script>

FillBlank组件实现：

<template>
  <div>
    <div v-html="processedText"></div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  props: ['text', 'answers'],
  data() {
    return {
      userAnswers: {}
    }
  },
  computed: {
    processedText() {
      let parts = this.text.split(/(__\d+__)/g);
      return parts.map(part => {
        if (part.match(/__\d+__/)) {
          const num = part.replace(/_/g, '');
          this.$set(this.userAnswers, num, '');
          return `<input v-model="userAnswers['${num}']">`;
        }
        return part;
      }).join('');
    }
  },
  methods: {
    submit() {
      this.$emit('submit', this.userAnswers);
    }
  }
}
</script>

样式优化建议

为填空输入框添加特定样式，提升用户体验。

.fill-blank-input {
  border-bottom: 1px dashed #333;
  width: 100px;
  text-align: center;
  margin: 0 5px;
}

.correct {
  background-color: #d4edda;
}

.incorrect {
  background-color: #f8d7da;
}