在 Vue.js 中实现全选和反选功能，可以通过结合`v-model`、计算属性和事件处理来完成。
数据绑定：为每个复选框绑定一个选中状态。
全选控制：通过一个复选框控制所有复选框的选中状态。
反选控制：通过一个按钮或复选框切换所有复选框的选中状态。
<template>
<div>
<!-- 全选复选框 -->
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
<span>全选</span>
<!-- 选项列表 -->
<ul>
<li v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.selected" />
{
{ item.text }}
</li>
</ul>
<!-- 反选按钮 -->
<button @click="toggleSelect">反选</button>
</div>
</template>
<script>
export default {
data() {
return {
selectAll: false,
items: [
{ text: 'Item 1', selected: false },
{ text: 'Item 2', selected: false },
{ text: 'Item 3', selected: false },
],
};
},
methods: {
// 全选逻辑
toggleSelectAll() {
this.items.forEach((item) => {
item.selected = this.selectAll;
});
},
// 反选逻辑
toggleSelect() {
this.items.forEach((item) => {
item.selected = !item.selected;
});
},
},
};
</script>通过计算属性动态更新全选状态，使代码更加简洁和可维护。
<template>
<div>
<!-- 全选复选框 -->
<input type="checkbox" v-model="selectAll" />
<span>全选</span>
<!-- 选项列表 -->
<ul>
<li v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.selected" />
{
{ item.text }}
</li>
</ul>
<!-- 反选按钮 -->
<button @click="toggleSelect">反选</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ text: 'Item 1', selected: false },
{ text: 'Item 2', selected: false },
{ text: 'Item 3', selected: false },
],
};
},
computed: {
// 计算全选状态
selectAll: {
get() {
// 如果所有项都被选中，返回 true
return this.items.every((item) => item.selected);
},
set(value) {
// 设置所有项的选中状态
this.items.forEach((item) => {
item.selected = value;
});
},
},
},
methods: {
// 反选逻辑
toggleSelect() {
this.items.forEach((item) => {
item.selected = !item.selected;
});
},
},
};
</script>v-model：用于双向绑定复选框的状态。
计算属性：通过`get`和`set`方法动态更新全选状态。
全选逻辑：当全选复选框被选中时，所有选项都被选中；否则，所有选项都不被选中。
反选逻辑：通过切换每个选项的选中状态实现反选。
到此这篇关于一文带你搞懂Vue.js如何实现全选反选功能的文章就介绍到这了,更多相关Vue.js全选反选内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！