vue复选框 模拟checkbox多选全选,vue页面加载屏蔽花括号

1、解决vue页面渲染出现花括号的问题：

在最外层的dom节点上加上 v-cloak ，css里面

<div class="detail-content" id="detail-content" v-cloak>
....
</div>

css:
[v-cloak]{
    display: none;
}

2、vue复选框 模拟checkbox多选全选

        <div class="list">
            <div @click="checkAll">.</div>
            <div class="checkList" v-for="item in List">
                <div>
                    <span class="check" :class="{'isChecked':Listids.indexOf(item.id)>=0}"  @click="checkOne(item.id)"></span>
                </div>
            </div>
        </div>

 

data:function(){
          return{
              List:[
                  {id:1,value:'one'},
                  {id:2,value:'two'},
                  {id:3,value:'three'}
              ],
              Listids:[],
              isCheckAll:false,
          }
},
methods:{
          checkOne(id){
              var ids = this.Listids.indexOf(id);
              if(ids>=0){
                  //如果包含了该ID，则删除（单选按钮由选中变为非选中状态）
                  this.Listids.splice(ids,1);
              }else{
                  //选中该按钮
                  this.Listids.push(id);
              }
              console.log(this.Listids);
          },
          checkAll(){
              //全选
              let that = this;
              that.isCheckAll = !that.isCheckAll;
              if(that.isCheckAll){
                  that.Listids=[];
                  that.List.forEach(function(elm){
                      that.Listids.push(elm.id)
                  })
              }else{
                  that.Listids=[];
              }
              console.log(this.Listids);
          }
}