怎样实现答题卡功能？

  • Z时代
  • 2024-02-23
  • 分类：IT

怎样实现答题卡功能？

怎样实现点击题目下面的选项样式改变，答题卡里对应的选项的样式也改变?

回答：

判断对应题目的答案是否为undefined，如果不是就改变样式...

回答：

思路解剖

1.未进行答案提交前，只涉及到答题者选择结果，进行结果的选择样式更迭
2.在切换答案时，将原有样式清楚，再新选择的答案上进行样式更迭

具体实现

<template>
  <!-- 具体的DOM自行编写,此处只是进行样式更迭的一个大概示例 -->
<div class="question-list">
      <div 
        class="question-item"
        v-for="item in list"
        :key="item.id"
      >
        <div class="question-item-title">
          {{ item.title }}
        </div>
        <div class="question-item-answer">
          <div 
            class="question-item-answer-item"
            v-for="el in item.answer"
            :key="el.id"
            @click="chooseAnwer(index,el.id)"
            :class="{'active': el.id === answerList[index].answerId}"
          >
            {{ el.label }}
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
 data(){
   return {
     list:[], // 题目列表
     answerList:[] // 选中的答案列表
   }
 },
 mounted(){
   this.init()
 },
 methods:{
  init(){
    this.list =[] // 接口返回数据
    // 实现处理好答题列表的数据。
    this.answerList = this.list.map(item=>{
     return {
      id:item.id,
      answerId: null
     }
    })
  },
  // 选中答案时，将答案的ID，存储到数组中进行处理
  chooseAnwer(index,id){
   this.answerList[index].answerId = id;
  }
 }
}
</script>

以上是 怎样实现答题卡功能？ 的全部内容， 来源链接： utcz.com/p/935644.html

回到顶部