vue实现自定义多选按钮

更新时间：2020年07月16日 11:17:37 作者：面壁思过程

这篇文章主要为大家详细介绍了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实现在线学生录入系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
Vue组件的继承用法示例详解
这篇文章主要介绍了Vue组件的继承用法,本文通过实例代码案例讲解给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
Vue父组件监听子组件生命周期
这篇文章主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
Vue+Echarts实现柱状折线图
这篇文章主要为大家详细介绍了Vue+Echarts实现柱状折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue中实现回车键登录功能
这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Vue3中reactive函数toRef函数ref函数简介
这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下
2021-09-09
vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题
setinterval()是定时调用的函数,可按照指定的周期（以毫秒计）来调用函数或计算表达式,这篇文章主要给大家介绍了关于vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题,需要的朋友可以参考下
2024-01-01
Vue 实现分页功能
Vue提供了丰富的API和组件，可以帮助开发者快速地构建现代化的Web应用程序，本文介绍了Vue如何实现分页功能，包括数据的获取、分页器的实现和页面的渲染
2023-09-09
Element-ui/Element-plus Vue报错问题及解决
这篇文章主要介绍了Element-ui/Element-plus Vue报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue移动端下拉刷新组件的使用教程
这篇文章主要介绍了Vue移动端下拉刷新组件的使用教程，每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突，这就很难受，这篇文章将解决它
2023-04-04