for列表 实现输出与复选框

1,接着上一章 条件渲染修改掉页面,将左边修改成右边这样,<checkbox>标签就是多选框

 

2.编写事件

我们因为需要删除所以在 删除的标签中添加点击事件 : @click="方法名()"括号里面可以写 index:默认下标或者 item.id : 数组的唯一值

如果使用索引值的话,上面 v-for 里面的括号就必须加上 index 然后在删除的标签中的@click 需要使用 remove(index) 才可以使用,否者就像上图一样使用

这样点击删除后,就会通过 console.log,在控制台删除 数组的 id;

这样就可以点击后删除,在数组名.value.splice中 id-1 是因为他是根据 下标删除了,从0开始所以需要 -1 或者就是我们使用index 去删除就不用 -1 了,逗号后面的 1 代表着删除一个;

使用 下标继续删除:

担然使用下吧的也是会有问题的因为我们没用为他设置 key 我们勾选了复选框的话,他不会一起被删除而是会跟着索引走,到下一个中选择,比如我们选择了vivo,然后删除掉vivo,他的复选框就给到了oppo,解决办法就是添加 在 v-for 后面添加 key 值:设置唯一值 

解决方法:我们为华为勾选上,然后删除,他就没用给到vivo复选框了,这就是key的作用;