vue复选框选择生成一个数组里面的元素,取消时数组元素删除
时间: 2024-04-11 13:26:48 浏览: 25
你可以使用Vue的v-model指令和事件处理来实现复选框选择生成和删除数组元素的功能。以下是一个简单的示例代码:
```html
<template>
<div>
<label v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectedItems">
{{ item.name }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
},
methods: {
updateSelectedItems() {
// 更新选中的数组元素
this.selectedItems = this.items.filter(item => this.selectedItems.includes(item.id));
}
}
}
</script>
```
在上面的代码中,你首先定义了一个数组 `items`,其中包含了要显示的选项。然后,你使用`v-for`指令循环遍历数组,并使用`v-model`指令绑定每个复选框的选中状态到`selectedItems`数组。
在`@change`事件处理函数中,你调用`updateSelectedItems`方法来更新选中的数组元素。这个方法通过筛选出`items`数组中与`selectedItems`数组中的id匹配的元素来更新`selectedItems`数组。
这样,当你勾选复选框时,相应的元素将被添加到`selectedItems`数组中;当你取消勾选复选框时,相应的元素将从`selectedItems`数组中删除。
你可以根据自己的需求进行修改和扩展。希望对你有所帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)