vue实现多填空
实现多填空功能
在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>以上方法可以根据具体需求选择或组合使用，实现灵活的多填空功能。
