欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue实现自定义多选按钮

时间:2021-08-30 10:02:44|栏目:vue|点击:

本文实例为大家分享了vue实现自定义多选按钮的具体代码,供大家参考,具体内容如下

图示

返回的选中列表是一个数组

html部分

<!-- 自定义多选 -->
 <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}</div>

js部分 

//data
 
arr:[
   {
   val:1,
   ischeck:false
   },
   {
   val:2,
   ischeck:false
   },
   {
   val:3,
   ischeck:false
   },
   {
   val:4,
   ischeck:false
   },
   {
   val:5,
   ischeck:false
   },
   {
   val:6,
   ischeck:false
   }
  ],
  selarr:[],
 
 
//methods
sel(index,item){
  let arr=[...this.arr];
  let selarr=[...this.selarr];
  if(arr[index].ischeck==false){
   arr[index].ischeck=true;
   selarr.push(item)
  }else{
   arr[index].ischeck=false;
   var index11=selarr.indexOf(index)
   selarr.splice(index11,1)
 
  }
 
  this.arr=arr;
  this.selarr=selarr;
 
},

样式

.list{
 width: 100%;
 line-height: 30px;
}
 
.list.active{
 background: pink;
}

上一篇:Vue列表渲染的示例代码

栏    目:vue

下一篇:vue2.0使用swiper组件实现轮播效果

本文标题:vue实现自定义多选按钮

本文地址:http://www.codeinn.net/misctech/171041.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有