悬赏缉拿,曼谷雨季分集介绍,兔子符号
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的全选和多个的删除功能,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论