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);
          }
}