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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
javascript解析json格式的数据方法详解
Aug 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
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
Javascript 二维数组
2009/11/26 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
利用aardio给python编写图形界面
2017/08/21 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python excel转换csv代码实例
2019/08/26 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
简历上的自我评价怎么写
2014/01/28 职场文书
运动会入场词60字
2014/02/15 职场文书
21岁生日感言
2014/02/27 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书