vue实现自定义多选按钮


Posted in Javascript onJuly 16, 2020

本文实例为大家分享了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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue实现div单选多选功能
Jul 16 #Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
斯福泰克软件测试面试题
2015/02/16 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
文明礼貌主题班会
2015/08/14 职场文书
如何写好竞聘报告
2019/04/03 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书