(vue) 循环实现单选

<div class="applist" :class="{'checklist' : index==current}" v-for="(item,index) in applist" :key="index">
        <img :src="item.app_logo">
        <p>{{item.app_name}}</p>
        <i class="icon-span" :class="{'icon-span-select' : index==current}" 	@click="check(item,index)"></i>
 </div>

// 选中
  check(item,index){
  
    //  console.log(index,this.current)

      if(index!=this.current){
         this.current = index;
      }else{
          this.current = -1;
      }

  }

样式：
.applist {
width: 112px;
height: 85px;
background-color: #F9F9F9;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
text-align: center;
img {
width: 32px;
border-radius: 50%;
margin-top: 12px;
}
p {
margin-top: 10px;
color: #333;
}
选框样式：
.icon-span{
display: inline-block;
background-color: #fff;
border-radius: 100%;
border: 1px solid #ccc;
position: relative;
width: 13px;
height: 13px;
vertical-align: middle;
}
.icon-span::after{
border: 2px solid transparent;
border-left: 0;
border-top: 0;
content: " ";
left: 3px;
position: absolute;
width: 4px;
height: 8px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
.icon-span-select{
background-color: #fff;
border-color: #E6E6E6;
}
.icon-span-select::after{
border-color: #2C61FF;
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
.checklist {
background-color: #2C61FF;
p {
color: #fff;
}
}