Vue实现单选题多选题以及判断题

Hello!掘金的小伙伴们大家好，我是  # 摸鱼小公举 ,比较前面写了一篇   element ui tree组件 的使用 的技术文章还是有些进步的,您的一个点赞和评论都是我写文章的莫大动力;希望大家能多多支持;谢谢!今天我们来实现一下Vue实现单选题多选题以及判断题!

正文开始了~

实现的逻辑思路

大体的思路就是写好html和样式后通过三层循环来渲染出数据
第一层循环先渲染大题题目 (单选题,多选题,判断题)
第二层循环渲染小题题目
第三层循环题目的选项
最后就是通过各层循环的索引来判断控制多选还是单选了

整体的数据结构如下

数据结构的渲染

下面我把HTML的代码贴出来

我们可以看到有三层的循环,每一层key都要是数组索引的参数以方便下面的逻辑实现
然后给每个选项都添加一个点击事件,然后点击的时候传四个值
(循环到当前对象item,大题索引值,小题索引值,选项索引值)

HTML代码

  <div class="question" v-for="(item, index) in questions" :key="index">
      <div class="maxTitle">{{item.titleName}}</div>
      <div class="smallQues" v-for="(item_1,index_1) in item.smallTitle" :key="index_1">
        <div class="title">{{ index_1 + 1 }},{{ item_1.title }}</div>
        <div
          class="option"
          v-for="(itemOne, index1) in item_1.options"
          :key="index1"
        >
          <span>{{itemOne.select}}.{{ itemOne.name }}</span>
        </div>
      </div>
    </div>
 
 CSS代码
 
 .question {
  background-color: #f8f9f9;
  width: 70%;
  text-align: left;
  padding: 50px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.smallQues{
  margin-top: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}
.option {
  margin-top: 50px;
  &:nth-child(2){
    margin-top: 10px;
  }
}
.option span {
  display: inline-block;
  background-color: pink;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  margin-right: 50px;
  text-align: center;
}
.maxTitle{
  font-size: 22px;
  font-weight: bold;
}

实现单选题功能 (判断题)

然后给每个选项都添加一个点击事件,并实现点击选择高亮效果;
然后点击的时候传四个值(循环到当前对象item,大题索引值,小题索引值,选项索引值)

HTML代码://通过第三层循环的itemOne的checked属性来判断是否显示高亮
 
          <span
            :class="itemOne.checked ? 'active' : ''"
            @click="selectClick(itemOne,index,index_1,index1)"
            >{{itemOne.select}}.{{ itemOne.name }}
         </span>
         
CSS代码://高亮样式
.option span.active {
  background-color: rgb(19, 212, 247);
  color: #fff;
}

JS代码: 
//实现单选,简单来说就是点击的索引,层层对应数据结构的索引;
直到最后对应到最后一层来改变选项的checked属性;
true为点击选中,false则是没有选中的;同时也实现了高亮的效果

 selectClick(item,index,index_1,index1) {
          this.questions[index].smallTitle[index_1].options.map((item,idx)=>{
              index1==idx?item.checked=true:item.checked=false
          })
   
    },

        

这是单选题实现的效果,只能选一个 ,这里全部都变成了单选题

多选题

 就是在刚刚的selectClick方法里多加一层判断即可区分
 多选是一小题可以选中好几个选项,能选中和取消,单选是只能选中有个,而且选中不能取消
 这里第二大题和第三大题是单选的模式的,只有第一大题才是多选;
 故大题索引为1的时候是多选只需要选项的item对象的checked属性互相取反就好
 
   selectClick(item,index,index_1,index1) {
       if(index==1){
         item.checked=!item.checked;
       }else{
          this.questions[index].smallTitle[index_1].options.map((item,idx)=>{
              index1==idx?item.checked=true:item.checked=false
          })
       }
   
    },
    submitClick(){

    
 

最后实现的效果

结语:

坦白说,其实这个功能很简单,但是我写的过程中很纠结,我应该怎么表达,大家才可以看懂;所以有不对的地方欢迎大家指出,有看不懂的地方可以评论留言