当前位置：首页 > VUE

vue实现多填空

2026-01-16 00:07:09VUE

实现多填空功能

在Vue中实现多填空功能可以通过动态绑定和循环渲染来实现。以下是几种常见的实现方式：

动态表单绑定

使用v-for指令动态生成填空输入框，并通过v-model绑定到数组或对象上：

<template>
  <div>
    <div v-for="(blank, index) in blanks" :key="index">
      <input v-model="blank.value" :placeholder="`填空 ${index + 1}`" />
    </div>
    <button @click="addBlank">添加填空</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blanks: [{ value: '' }, { value: '' }]
    }
  },
  methods: {
    addBlank() {
      this.blanks.push({ value: '' })
    }
  }
}
</script>

填空题与文本混合

如果需要在一段文本中嵌入多个填空，可以使用模板字符串和动态组件：

<template>
  <div>
    <p v-html="processedText"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '{{1}}是中国的首都，{{2}}是最大的城市',
      answers: ['北京', '上海']
    }
  },
  computed: {
    processedText() {
      return this.text.replace(/\{\{(\d+)\}\}/g, (match, p1) => {
        const index = parseInt(p1) - 1
        return `<input v-model="answers[${index}]" />`
      })
    }
  }
}
</script>

使用组件封装

可以创建一个可复用的填空组件：

<template>
  <div class="fill-blank">
    <span v-for="(part, index) in parts" :key="index">
      <span v-if="part.type === 'text'">{{ part.content }}</span>
      <input v-else v-model="answers[part.index]" />
    </span>
  </div>
</template>

<script>
export default {
  props: {
    template: String
  },
  data() {
    return {
      answers: []
    }
  },
  computed: {
    parts() {
      const regex = /\{\{(\d+)\}\}/g
      let parts = []
      let lastIndex = 0
      let match

      while ((match = regex.exec(this.template)) !== null) {
        if (match.index > lastIndex) {
          parts.push({
            type: 'text',
            content: this.template.slice(lastIndex, match.index)
          })
        }

        parts.push({
          type: 'blank',
          index: parseInt(match[1]) - 1
        })

        lastIndex = match.index + match[0].length
      }

      if (lastIndex < this.template.length) {
        parts.push({
          type: 'text',
          content: this.template.slice(lastIndex)
        })
      }

      return parts
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的表单库如VeeValidate或Vuelidate来增强填空功能：

<template>
  <div>
    <ValidationObserver>
      <div v-for="(blank, index) in blanks" :key="index">
        <ValidationProvider rules="required" v-slot="{ errors }">
          <input v-model="blank.value" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>
    </ValidationObserver>
  </div>
</template>

以上方法可以根据具体需求选择或组合使用，实现灵活的多填空功能。

vue实现多填空