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实现自定义多选与单选的答题功能的使用技巧和注意事项，需要的朋友参考一下 本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意， 能把我们的多选单选功能很完美的且很强大得双向绑定起来，实现多选单选任意选根本不在话下。 但是，凡事都有一个但是！ 但是奈何这个项目设计稿的缘故，使用原生的表单组件是
-
本文向大家介绍vue v-model实现自定义样式多选与单选功能，包括了vue v-model实现自定义样式多选与单选功能的使用技巧和注意事项，需要的朋友参考一下 这两天在玩mpvue，但是下午如果对着文档大眼瞪小眼的话，肯定会睡着的。 想起昨晚的flag，我就想直接用demo上手吧，一举两得 谁想到我好不容易快做完了，v-model在小程序中不起作用！ 来不及研究为什么，我先直接在原来项目上
-
本文向大家介绍Android自定义View实现拖动选择按钮，包括了Android自定义View实现拖动选择按钮的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Android实现拖动选择按钮的具体代码，供大家参考，具体内容如下 效果图 View代码 第一步：自定义属性 第二步：自定义圆形 第三步：自定义拖动按钮 使用方法 布局文件： 页面代码： 以上就是本文的全部内容，希望对大家的学习有所
-
本文向大家介绍Android自定义view实现拖拽选择按钮，包括了Android自定义view实现拖拽选择按钮的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现拖拽选择按钮的具体代码，供大家参考，具体内容如下 github地址：https://github.com/xuezj/DragChooseDemo DragChooseDemo 效果图 Attributes属性
-
问题内容： 如何在flutter中创建这样的自定义单选按钮组 问题答案： 这是完整的代码 To use :
-
本文向大家介绍vue el-table实现自定义表头，包括了vue el-table实现自定义表头的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue el-table实现自定义表头的具体代码，供大家参考，具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头。 文档说明如下： 代码实现： 页面效果如下： 以上就是本文的全部内容，希望对大家的学习有所帮