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的Alert消息框插件使用介绍
Oct 09 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
JS class语法糖的深入剖析
Jul 07 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php PDO异常处理详解
2016/11/20 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
经典促销广告词大全
2014/03/19 职场文书
投标担保书范文
2014/04/02 职场文书
大四毕业生自荐书
2014/07/05 职场文书
村级四风对照检查材料
2014/08/24 职场文书
创建文明城市倡议书
2015/04/28 职场文书
生日赠语
2015/06/23 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers