vue 计算属性的完整写法
计算属性的完整写法是：
computed:{
计算属性名:{
get(){
// 代码逻辑和操作
return 结果
},
set(修改的值){
// 代码逻辑和操作
}
}
}
全选和反选小案例
思路：首先每个项的复选框绑定到数据上，然后复选框全部选中，则全选复选框被选中。
同理全选复选框的点选取消也会影响单个的复选框被选中还是取消。
然后只需要利用计算属性（计算属性绑定到全选上），来计算每一项是否复选框都被选择，若是则将全选按钮选中。显然这是一个计算属性的get。
点选全选复选框，从而决定单个的复选框被选中还是取消，只需要在计算属性的set时，将每一项遍历然后修改其选中状态。
<style>
.box {
width: 500px;
height: 500px;
margin: 20vh auto;
}
th,
tr,
td {
border: 1px solid black;
width: 100px;
}
</style>
<div id="app" class="box">
<table>
<tr>
<th>操作</th>
<th>id</th>
<th>姓名</th>
</tr>
<tr v-for="(item,index) in userList" :key="item.id">
<td><input type="checkbox" v-model="item.isChecked"></td>
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
</tr>
<tr>
<td colspan="3"><input type="checkbox" v-model="isCheckAll">全选</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
userList:[
{
id:1001,name:'张三',isChecked:true},
{
id:1002,name:'李四',isChecked:false},
{
id:1003,name:'王五',isChecked:false}
]
},
computed:{
isCheckAll:{
// get 通过所有复选框选中，然后自动选中全选按钮
get(){
return this.userList.every(item=>item.isChecked===true)
},
// set 根据手动选中全选，实现所有复选框的选中和取消
set(newStatus){
// newStatus 为当前全选复选框的状态，true || false
this.userList.forEach(item=>item.isChecked=newStatus)
}
}
}
})
</script>
效果图：
