vue实现多填空
Vue 实现多填空功能
在 Vue 中实现多填空功能可以通过动态绑定和循环渲染实现。以下是一个完整的实现方案：
数据准备
定义填空数据数组，每个填空包含题目和用户输入值：
data() {
return {
blanks: [
{ question: 'Vue 是一个 ___ 框架', answer: '' },
{ question: 'Vue 的核心特性包括 ___ 和 ___', answer: ['', ''] },
{ question: 'Vue 的指令以 ___ 开头', answer: '' }
]
}
}模板渲染
使用 v-for 循环渲染每个填空题，根据答案类型区分单填空和双填空：
<div v-for="(blank, index) in blanks" :key="index">
<p>{{ blank.question }}</p>
<!-- 单填空 -->
<input
v-if="!Array.isArray(blank.answer)"
v-model="blank.answer"
placeholder="请输入答案"
>
<!-- 多填空 -->
<template v-else>
<input
v-for="(ans, i) in blank.answer"
v-model="blank.answer[i]"
:placeholder="`填空 ${i+1}`"
:key="i"
>
</template>
</div>验证逻辑
添加提交验证方法检查填空完整性：
methods: {
submitAnswers() {
const isComplete = this.blanks.every(blank => {
if (Array.isArray(blank.answer)) {
return blank.answer.every(ans => ans.trim())
}
return blank.answer.trim()
})
if (isComplete) {
// 处理提交逻辑
} else {
alert('请完成所有填空')
}
}
}样式优化
添加基础样式提升用户体验：
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
input:focus {
outline: none;
border-color: #42b983;
}动态添加填空
支持动态添加新的填空题：
addNewBlank() {
this.blanks.push({
question: '',
answer: ''
})
}注意事项
- 对于复杂填空模式（如3个以上填空位），建议使用专门的问题配置对象
- 考虑添加题目编辑功能，允许修改问题文本
- 可以扩展支持多种题型（单选、多选等）的混合模式
- 移动端需要调整输入框样式确保可用性
这种实现方式提供了灵活的多填空支持，既能处理简单单填空，也能处理包含多个填空位的复杂题目。通过响应式数据绑定，所有用户输入会自动同步到组件状态中。
