当前位置：首页 > VUE

vue实现试卷功能填空

2026-01-22 20:30:30VUE

实现思路

Vue实现试卷填空功能需要结合动态表单绑定、数据管理和用户交互逻辑。核心在于动态渲染填空题题干，并收集用户输入答案。

基础结构设计

创建Vue组件，包含题目数据、用户答案存储和渲染逻辑：

<template>
  <div class="exam-container">
    <div v-for="(question, index) in questions" :key="index" class="question-item">
      <div class="question-text" v-html="renderQuestionText(question)"></div>
      <input 
        v-model="userAnswers[index]" 
        :placeholder="'填空'+ (index+1)"
        @input="handleAnswerChange(index)"
      >
    </div>
  </div>
</template>

数据管理

使用响应式数据存储题目和答案：

<script>
export default {
  data() {
    return {
      questions: [
        { text: ' Vue的核心特性是___和___', blanks: 2 },
        { text: ' ___指令用于双向数据绑定', blanks: 1 }
      ],
      userAnswers: []
    }
  },
  created() {
    this.initAnswers()
  },
  methods: {
    initAnswers() {
      this.userAnswers = this.questions.map(q => 
        Array(q.blanks).fill('')
      )
    }
  }
}
</script>

动态渲染处理

解析题目文本中的填空位置：

methods: {
  renderQuestionText(question) {
    let parts = question.text.split('___')
    return parts.map((part, i) => 
      i < parts.length - 1 
        ? `${part}<span class="blank-num">(${i+1})</span>`
        : part
    ).join('')
  },
  handleAnswerChange(index) {
    this.$emit('answer-change', {
      questionIndex: index,
      answers: this.userAnswers[index]
    })
  }
}

样式优化

添加基础样式提升用户体验：

<style>
.blank-num {
  color: #888;
  font-size: 0.8em;
  vertical-align: super;
}
.question-item {
  margin-bottom: 20px;
}
input {
  border-bottom: 1px dashed #333;
  margin: 0 5px;
}
</style>

进阶功能实现

支持多种填空类型和验证：

data() {
  return {
    questions: [
      {
        text: '___年Vue发布，最新版本是___',
        blanks: 2,
        validations: [
          { type: 'number', min: 2014, max: 2023 },
          { type: 'text', pattern: '/^\\d+\\.\\d+\\.\\d+$/' }
        ]
      }
    ]
  }
},
methods: {
  validateAnswer(index) {
    return this.questions[index].validations.every((rule, i) => {
      const answer = this.userAnswers[index][i]
      if (rule.type === 'number') {
        return answer >= rule.min && answer <= rule.max
      }
      if (rule.pattern) {
        return new RegExp(rule.pattern).test(answer)
      }
      return true
    })
  }
}

状态管理方案

对于复杂场景建议使用Vuex：

// store.js
export default new Vuex.Store({
  state: {
    examPaper: {
      questions: [],
      answers: []
    }
  },
  mutations: {
    UPDATE_ANSWER(state, payload) {
      state.examPaper.answers[payload.qIndex][payload.aIndex] = payload.value
    }
  }
})

服务端集成

实现自动批改功能：

methods: {
  async submitExam() {
    const result = await axios.post('/api/check-answers', {
      answers: this.userAnswers
    })
    this.$emit('graded', result.data.score)
  }
}

以上方案可根据实际需求进行组合或扩展，核心在于维护题目与答案的对应关系，并通过Vue的响应式特性实现动态更新。

vue实现试卷功能填空