Vue checkbox simulates checkbox multi-select all selection, vue page load shields curly braces

1. Solve the problem of curly braces in vue page rendering:

Add v-cloak to the outermost dom node, inside css

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

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

2. Vue checkbox simulates checkbox multi-select all selection

        <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){
                  //If the ID is included, delete it (the radio button changes from selected to unselected)
                  this.Listids.splice(ids,1);
              }else{
                  //select the button
                  this.Listids.push(id);
              }
              console.log(this.Listids);
          },
          checkAll () {
              //select all
              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);
          }
}