Demo 在线地址：
https://sx00xs.github.io/test/18/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）
<template>
<div id=app>
<dl>
<dt>
<input @click="handleCheckall" type=checkbox id=checkAll v-model="checkedAll"/>
<label>{{selectVal}}</label>
<a href=javascript:; @click="handleFanxuan">反选</a>
</dt>
<dd>
<p v-for="list in lists" :key="list.val">
<input :type="list.typ" :name="list.name" v-model="list.checked" @click="handleClick">
<label>{{list.val}}</label>
</p>
</dd>
</dl>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</div>
</template>
<script>
export default {
data:function(){
return{
checkedAll:false,
selectVal:'全选',
lists:[
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（一）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（二）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（三）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（四）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（五）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（六）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（七）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（八）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（九）'
},
{
typ:'checkbox',
name:'item',
checked:false,
val:'选项（十）'
},
]
}
},
methods:{
handleCheckall(){
for(var i=0;i<this.lists.length;i++){
this.lists[i].checked=!this.checkedAll;
}
//this.selectVal=this.selectVal==='全选' ? '全不选' :'全选';
this.isCheckAll()
},
handleFanxuan(){
for(var i=0;i<this.lists.length;i++){
this.lists[i].checked = !this.lists[i].checked;
}
this.isCheckAll()
},
isCheckAll(){
for(var i=0,n=0;i<this.lists.length;i++){
this.lists[i].checked && n++;
}
//console.log(n);
this.checkedAll = n === this.lists.length;
this.selectVal=this.checkedAll ? '全不选' : '全选';
},
handleClick(){
this.isCheckAll()
}
},
updated(){
this.isCheckAll()
}
}
</script>