当前位置：首页 > VUE

vue实现文字填空功能

2026-02-25 01:02:17VUE

实现文字填空功能的基本思路

在Vue中实现文字填空功能，可以通过动态绑定和条件渲染来实现。核心是维护一个数据模型，用于存储填空的答案，并通过v-model或事件监听来更新用户输入。

数据模型设计

定义一个数组或对象来存储填空的文本和用户输入：

vue实现文字填空功能

data() {
  return {
    blanks: [
      { text: 'Vue是一种___框架', answer: '', placeholder: 'JavaScript' },
      { text: 'Vue的核心特性包括响应式___', answer: '', placeholder: '数据绑定' }
    ]
  }
}

模板渲染

使用v-for循环渲染填空题目，并用v-model绑定用户输入：

<div v-for="(blank, index) in blanks" :key="index">
  <p>{{ blank.text.replace('___', `____${blank.answer ? blank.answer : '___'}____`) }}</p>
  <input 
    v-model="blank.answer" 
    :placeholder="`请输入: ${blank.placeholder}`"
  />
</div>

样式美化

添加CSS使填空区域更直观：

vue实现文字填空功能

input {
  border-bottom: 1px dashed #42b983;
  outline: none;
  width: 120px;
  text-align: center;
}

答案验证功能

添加方法验证用户答案：

methods: {
  checkAnswers() {
    return this.blanks.every(blank => 
      blank.answer.toLowerCase() === blank.placeholder.toLowerCase()
    )
  }
}

动态填空生成

如果需要从字符串动态生成填空：

generateBlanks(text) {
  const segments = text.split('___')
  return segments.map((segment, i) => ({
    text: segment,
    answer: i < segments.length - 1 ? '' : null,
    placeholder: '填空' + (i + 1)
  }))
}

完整组件示例

<template>
  <div class="fill-blank">
    <div v-for="(blank, index) in blanks" :key="index" class="blank-item">
      <span v-html="renderBlankText(blank)"></span>
      <input
        v-model="blank.answer"
        :placeholder="`${blank.placeholder}`"
        @input="onAnswerChange"
      />
    </div>
    <button @click="checkAnswers">提交答案</button>
    <p v-if="showResult">{{ resultMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blanks: [
        { text: 'Vue使用___语法进行模板渲染', answer: '', placeholder: '指令' },
        { text: 'Vue的核心概念包括___、组件和状态管理', answer: '', placeholder: '响应式' }
      ],
      showResult: false,
      resultMessage: ''
    }
  },
  methods: {
    renderBlankText(blank) {
      return blank.text.replace('___', 
        `<span class="blank-space">${blank.answer || '___'}</span>`)
    },
    checkAnswers() {
      const allCorrect = this.blanks.every(b => 
        b.answer && b.answer.toLowerCase() === b.placeholder.toLowerCase())
      this.showResult = true
      this.resultMessage = allCorrect ? '全部正确!' : '有错误答案，请检查'
    },
    onAnswerChange() {
      this.showResult = false
    }
  }
}
</script>

<style>
.blank-space {
  border-bottom: 1px solid #42b983;
  padding: 0 5px;
  margin: 0 2px;
}
.blank-item {
  margin: 15px 0;
}
input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 8px;
  margin-left: 5px;
}
</style>