使用vue.js实现checkbox的全选和多个的删除功能
2017-02-17 15:08
1416 查看
template代码:
<template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr"> </label>{{item.name}} </li>: </ul> <button type="" @click="del">删除</button>{{selectArr}} <label> <input type="checkbox" class="checkbox" @click="selectAll" />全选 </label> </div> </template>
script部分:
<script> var proData = [{ "name": "j1ax" }, { "name": "j2ax" }, { "name": "j3ax" }, { "name": "j4ax" }] export default { name: 'hello', data() { return { proData: proData, selectArr: [] } }, created() { this.$http.get('/api/home').then(function(response) { response = response.body; this.proData = response.data; }) }, methods: { del() { let arr = []; var len = this.proData.length; for (var i = 0; i < len; i++) { if (this.selectArr.indexOf(i)>=0) { console.log(this.selectArr.indexOf(i)) }else{ arr.push(proData[i]) } } this.proData = arr; this.selectArr = [] }, selectAll(event) { var _this = this; console.log(event.currentTarget) if (!event.currentTarget.checked) { this.selectArr = []; } else { //实现全选 _this.selectArr = []; _this.proData.forEach(function(item, i) { _this.selectArr.push(i); }); } } } } </script>
以上所述是小编给大家介绍的使用vue.js实现checkbox的全选和多个的删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- Vue.js实现的表格增加删除demo示例
- vue.js实现点击后动态添加class及删除同级class的实现代码
- vue.js 嵌套循环、if判断、动态删除的实例
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- Vue.js移动端左滑删除组件的实现代码
- Vue.js实现一个todo-list的上移下移删除功能
- vue.js删除动态绑定的radio的指定项
- vue.js树形组件之删除双击增加分支实例代码
- 使用Bootstrap + Vue.js实现添加删除数据示例
- Vue.js实现表格动态增加删除的方法(附源码下载)
- Vue.js动态添加、删除选题的实例代码
- vue.js删除列表中的一行
相关文章推荐
- 使用vue.js实现checkbox的全选和多个的删除功能
- 使用vue.js实现checkbox的全选,和多个的删除
- 使用vue.js实现checkbox的全选,和部分删除,部分提交
- 使用js实现checkbox的全选与反选功能二
- 使用js实现checkbox的全选与反选功能
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- 用Vue.js实现全选与全不选删除功能
- JS在GridView中实现CheckBox全选和非全选 及Gridview批量删除使用技巧
- 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)
- 比较全的JS checkbox全选、取消全选、删除功能代码
- JS小功能(checkbox实现全选和全取消)实例代码
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js
- JS实现checkbox全选功能
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 模拟网易邮箱实现全选,全不的功能/使用DataList实现 加入购物车,编辑,删除,更新,取消功能。/试完成Datalist使用存储过程来分页
- 一个较简单的js实现checkbox的全选与全不选功能
- js javascript 实现复选框全选功能 删除复选框选中项功能
- 用JS实现CheckBox的全选 修改 取消 查询 删除的函数
- GridView控件与CheckBox结合,实现全选功能,同时实现删除选中的多行数据
- JS:&quot;全选&quot;功能实现(checkbox)