在Vue.js中，实现全选和反选功能通常涉及到数据绑定和数组操作。在这个示例中，我们将讨论如何创建一个简单的Vue组件，该组件包含一个全选按钮、一个输入框和一个列表，列表中的每一项都有一个复选框。用户可以输入文本，按下回车键后，新的条目会添加到列表中，且初始状态为未选中。全选按钮则可以改变所有条目的选中状态。
我们来看一下HTML模板部分：
```html
<template>
<div class="check">
<button @click="checkAll">全选</button>
<br />
<input type="text" v-model="txt" @keyup.enter="ck" />
<ul>
<li v-for="(mx, index) in list" :key="index">
<input type="checkbox" v-model="mx.check" /> {{mx.txt}}
</li>
</ul>
</div>
</template>
```
这里的模板定义了一个按钮、一个输入框和一个列表。`v-for`指令用于循环渲染列表，`v-model`指令用于双向数据绑定，使得复选框的状态与`mx.check`同步。`@keyup.enter`事件监听回车键，触发`ck`方法。
接着是JavaScript部分：
```javascript
<script>
export default {
data() {
return {
txt: "",
list: []
}
},
methods: {
ck() {
this.list.push({
txt: this.txt,
check: false
})
this.txt = ""
},
checkAll() {
this.list.forEach((mx) => {
mx.check = !mx.check
})
}
}
}
</script>
```
在`data`中，定义了两个属性：`txt`用于存储用户输入的文本，`list`用于存储列表数据。`methods`中定义了两个方法：`ck`用于处理回车键事件，将输入的文本添加到列表；`checkAll`用于切换所有条目的选中状态，这里使用`forEach`遍历`list`，并将每个条目的`check`属性取反。
最后是CSS样式部分，这里省略了具体样式，主要是对按钮和列表的美化。
这个示例的核心在于理解Vue的数据绑定和响应式系统。当`checkAll`方法被调用时，它改变了`list`中的每一个对象的`check`属性，Vue会自动检测这些变化并更新视图。同样，当用户在复选框上进行操作时，`mx.check`的改变也会立即反映到数据模型上。
Vue.js通过其强大的数据绑定和响应式机制，使得实现全选/反选功能变得简单且直观。这个示例展示了如何利用Vue的特性构建一个交互式的用户界面，并提供了学习Vue.js基本用法的一个实例。希望这个例子能帮助你更好地理解和应用Vue.js。在实际开发中，可以根据需求进一步扩展，例如添加取消选择的功能，或者在数据量大时考虑性能优化。
