石家庄哪里有做外贸网站的公司,怎么在网上做彩票网站,wordpress自动给关键词加内链方法,网站邮箱配置Vue复选框批量删除
通过使用v-model指令绑定单个复选框 例如input typecheckbox idcheckbox v-modelchecked 而本次我们要做的示例大致是这样的#xff0c;首先可以增加内容#xff0c;然后通过勾选来进行单独或者批量删除input typecheckbox idcheckbox v-modelchecked 而本次我们要做的示例大致是这样的首先可以增加内容然后通过勾选来进行单独或者批量删除但是在此处就可以进行批量操作。 通过勾选原神和明日进行批量删除后发现成功了那么这就是表名咱们的操作没有问题接下来就要具体代码实现。
具体代码实现
body中div挂载点是zjw也就是张俊伟的缩写当然这可以自己写什么都行只要与Vue里面的el对应
div idzjw
span添加一条内容/span
input placeholder输入内容 v-modelvalue/
button clickadd()添加/buttonulli v-for(item,index) in list :keyindexinput typecheckbox v-modelitem.c/span{{item.d}}/spanbutton clickremove(index)删除/button/li/ulbutton clickremoveAll()批量删除/button
/div
scriptconst appnew Vue({el:#zjw,data(){return{list:[{d:洗碗,c:false},{d:擦地,c:false}],value:}},methods:{add(){adds{d:this.value,c:false}this.list.push(adds)this.value},remove(i){if(this.list[i].ctrue)this.list.splice(i,1)},removeAll(){for (var i this.list.length - 1; i 0; i--)if (this.list[i].ctrue) this.list.splice(i, 1);}}})
/script分析环节
添加的框
添加操作用click绑定了一个add() 在input中的v-model是value
span添加一条内容/span
input placeholder输入内容 v-modelvalue/
button clickadd()添加/button下面是script内容 在data中我是用了对象数组来做里面用了一个c来放复选的状态false没选true选 而add中也是每次添加的不止文字还有false或者true,通过this.list.push(adds)加入到数组队尾
data(){return{list:[{d:洗碗,c:false},{d:擦地,c:false}],value:}},methods:{add(){adds{d:this.value,c:false}this.list.push(adds)this.value},对于单个删除和批量操作
这里通过li v-for(item,index) in list :keyindex input typecheckbox v-modelitem.c/ span{{item.d}}/span button clickremove(index)删除/button/li 来讲data中的数据显示出来并且可以删除或者批量 在button中使用v-modelitem.c绑定复选框的状态 ulli v-for(item,index) in list :keyindexinput typecheckbox v-modelitem.c/span{{item.d}}/spanbutton clickremove(index)删除/button/li/ulbutton clickremoveAll()批量删除/button而单个删除就是如下操作一个简单判断this.list[i].c的值就行 对于多选其实也就是多了一个在数组中的循环 for (var i this.list.length - 1; i 0; i--)就可以完成批量删除了 remove(i){if(this.list[i].ctrue)this.list.splice(i,1)},removeAll(){for (var i this.list.length - 1; i 0; i--)if (this.list[i].ctrue) this.list.splice(i, 1);}
