怎样实现选择答案，答题卡样式改变？

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

怎样实现选择答案，答题卡样式改变？

就像这样，在左边选择答案，右边答题卡相应的题号的样式改变？

题目代码

<div v-for="list1 in list.optionsList" :key="list1.id">
            <el-radio-group v-model="answer[index]" class="radio_option"
            @change="onChange(list1)">
              <el-radio :label="list1.key" 
              v-model="answer[index]"
              class="radio_option_alone">
                {{ list1.title }} {{ list1.key }}
              </el-radio>
            </el-radio-group>
          </div>

答题卡代码

<!-- 答题卡 -->
    <div class="Scantron">
      <p class="Scantron_top">答题卡</p>
      <div class="Scantron_title">
        <p class="title_one">RART01:单选题</p>
        <p class="title_two">( 共10题，合计30分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.singleLists">
        <li v-for="(li, index) in paper.singleLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART02:多选题</p>
        <p class="title_two">( 共10题，合计30分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.multipleLists">
        <li v-for="(li, index) in paper.multipleLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART03:判断题</p>
        <p class="title_two">( 共05题，合计10分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.judgeLists">
        <li v-for="(li, index) in paper.judgeLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART04:简答题</p>
        <p class="title_two">( 共05题，合计10分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.shortLists">
        <li v-for="(li, index) in paper.shortLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
    </div>

回答：

<style>
.active{
color: red;
}
</style>
:class="{active: answer[index] != null}"
<ul class="Scantron_option" v-if="paper.singleLists">
        <li v-for="(li, index) in paper.singleLists.length" :key="index" :class="{active: answer[index] != null}">
          {{ index + 1 }}
        </li>
      </ul>

回答：

用样式不就好了：:class="{active: li.value !== null}"

以上是 怎样实现选择答案，答题卡样式改变？ 的全部内容， 来源链接： utcz.com/p/935883.html

回到顶部