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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
10个新的最有前途的JavaScript框架
Mar 12 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 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分页函数
2006/07/08 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python实现读取json文件到excel表
2017/11/18 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python3爬虫全国地址信息
2019/01/05 Python
python ftplib模块使用代码实例
2019/12/31 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
小学生开学感言
2014/02/28 职场文书
受伤赔偿协议书
2014/09/24 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
2019入党申请书格式
2019/06/25 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python