Vue中用计算属性实现全选/反选，核心是通过allChecked计算属性双向联动全选与单项状态：getter根据list.every判断全选，setter批量赋值；单项v-model触发getter重算；支持indeterminate半选状态。
Vue 中用计算属性实现全选/反选，核心是把“全选状态”和“单项状态”通过
双向联动起来，避免手动维护状态不一致。关键不在写多少代码，而在理清数据流向：全选按钮控制所有子项，子项变化又反过来影响全选按钮。
一、基础数据结构要清晰
确保你的列表数据每项都有唯一标识（如
）和可响应的选中状态字段（推荐用
）：
二、用计算属性定义“全选状态”
全选按钮的
绑定一个计算属性，它根据列表中所有
的值动态决定是否为 true：
当所有子项都为
→ 全选为
只要有一个为
→ 全选为
如果列表为空，全选默认为
（也可按需设为
）
三、单项勾选也要触发全选更新
每个子项用
即可。由于
是响应式数据，一旦变化，
的 getter 就会重新执行，全选按钮自动同步 —— 不需要额外 watch 或事件监听。
立即学习
“
前端免费学习笔记（深入）
”；
Vue-router参考手册
Vue-router参考手册下载
下载
模板中这样写：
四、进阶：支持“半选”状态（indeterminate）
原生 checkbox 支持
属性，表示“部分选中”。Vue 中不能直接用
控制它，需用
绑定：
当
→
当
但至少有一项为
→
否则（全为 false）→
对应计算属性：
computedidchecked
data() {
return {
list: [
{ id: 1, name: '苹果', checked: false },
{ id: 2, name: '香蕉', checked: false },
{ id: 3, name: '橙子', checked: false }
]
}
}
v-modelcheckedtruetruefalsefalsefalsetrue
computed: {
allChecked: {
get() {
if (this.list.length === 0) return false
return this.list.every(item => item.checked)
},
set(value) {
this.list.forEach(item => item.checked = value)
}
}
}
v-model="item.checked"item.checkedallChecked
全选
{{ item.name }}
indeterminatev-model:indeterminateallChecked === trueindeterminate = falseallChecked === falsetrueindeterminate = trueindeterminate = false
computed: {
isIndeterminate() {
const checkedCount = this.list.filter(i => i.checked).length
return checkedCount > 0 && checkedCount < this.list.length
}
}