前端用watch监听全选、全不选等的例子
时间: 2024-01-07 09:33:43 浏览: 30
当需要监听全选、全不选等操作时,可以使用Vue.js的`watch`属性来监听数据变化。下面是一个示例代码:
```html
<template>
<div>
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="item.selected" @change="updateSelectAll"> {{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false },
{ id: 3, name: 'Item 3', selected: false }
],
selectAll: false
};
},
watch: {
items: {
deep: true,
handler(newItems) {
const allSelected = newItems.every(item => item.selected);
if (allSelected !== this.selectAll) {
this.selectAll = allSelected;
}
}
}
},
methods: {
toggleSelectAll() {
this.items.forEach(item => {
item.selected = this.selectAll;
});
},
updateSelectAll() {
const allSelected = this.items.every(item => item.selected);
if (allSelected !== this.selectAll) {
this.selectAll = allSelected;
}
}
}
};
</script>
```
在上面的例子中,有一个全选的复选框和一系列的项目复选框。当项目复选框的选择状态发生变化时,会通过`watch`属性监听`items`的变化。在`watch`属性中,我们使用`handler`函数来检测所有项目是否都被选中,并更新全选的状态。当全选的复选框状态发生变化时,会触发`toggleSelectAll`方法,将所有项目的选择状态设置为全选的状态。当项目复选框的选择状态发生变化时,会触发`updateSelectAll`方法,检测所有项目是否都被选中,并更新全选的状态。
这样,当用户选择项目复选框或全选复选框时,会自动更新全选的状态。