SOURCE

var app4 = new Vue({
    el: '#app-4',
    data: {
      checkboxItems:[
           {name:"Jack",id:1, age:18, price:18},
           {name:"John",id:2, age:19, price:19},
           {name:"Mike",id:3, age:20, price:20}
       ],
      checkedNames:[],
      checkedAll:false,
      total:0
    },
  	methods:{
     		selectAll:function(){
          var ary = this.checkboxItems;
          console.log(this.checkedNames.length)
          if(this.checkedNames.length > 0){
            this.checkedNames = [];
            return;
          }
          for(var key in ary) {
							this.checkedNames.push(ary[key]);
					}
         
			}
    },
   watch:{
     	"checkedNames":function(to, from){
        	this.checkedAll = this.checkboxItems.length == this.checkedNames.length;
        	this.total = 0;
        	for(var i=0; i < this.checkedNames.length;i++) {
						this.total += this.checkedNames[i].price;
          }
      }
   }
});

<div id="app-4">
    <div class="checkbox-wrap">
  <p v-for="(item, index) in checkboxItems" >
    <input type="checkbox" :id="index" :value="item" name="choose" v-model="checkedNames">
    <label :for="index">{{item.name}}</label>
  </p>
      
<p>
  <input type="checkbox" id="a" name="choose" v-model="checkedAll">
  <label for="a" @click.prevent="selectAll">全选</label>
  {{checkedNames}}
</p>


  </div>
<br/>
  <button @click="selectAll">全选</button>
  <span>总和: {{ total }}</span>
</div>

.checkbox-wrap{
    width: 90%;
    position: relative;
    margin: 0 auto;
    top: 30%;
    height: 40%;
    background-color: white;
}
input[type="checkbox"]{
    /* width: 40px; */
    /* height: 40px; */
    /* -webkit-border-radius: 50%; */
    display: none;
}
input[type="checkbox"]+label {
    display: inline-block;
    width: 48%;
    margin-top: 10px;
    margin-left: 5px;
    text-align: left;
    -webkit-box-sizing: border-box;
}

label::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #EEE;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    margin-right: 5px;
    -webkit-box-sizing:border-box;
  -webkit-transition:background ease-in .5s
}

input[type="checkbox"]:checked+label::before{
      #background-color: rgb(53, 183, 111);
    #border: 5px #EEEEEE solid;
  background: url(http://lt.hncbrcb.cc/wechat/image/check-hover.png);
}