Vue练习十八：02_12_复选框

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>