console 命令行工具 X clear

console

var app = new Vue({
				el:'#app',
				data:{
					list:[
						{
							id:1,
							name:'小米',
							price:2999,
							count:1,
							ischecekbox:false
							
						},
						{
							id:2,
							name:'华为 p30 por',
							price:5299,
							count:1,
							ischecekbox:false
						},
						{
							id:3,
							name:'vivo',
							price:3299,
							count:1,
							ischecekbox:false
						}
						
					],
					quanx:false,
					lengths:0,
				},
				computed:{
					//总价
					zongjia:function(){
						var zjia = 0
						for(var i =0;i<this.list.length;i++){
							var time = this.list[i]
							//查看ischecekbox状态进行价钱加减
							if( time.ischecekbox){
								zjia += time.price*time.count
							}
						}
						return zjia.toString().replace(/\B(?=(\d{3})+$)/g,',')
					}
				},
				methods:{
					//添加或减去商品数量
					changeMondy:function(produt,way){
						if(way>0){
							produt.count++
						}else{
							produt.count--
							produt.count<1?produt.count=1:produt.count
						}
					},
					//清除商品
					handleRemove: function (index) {
					    this.list.splice(index, 1);
					},
					quanxuan:function(){
						for(var i = 0;i<this.list.length;i++){
							if(this.quanx){
								//全部去除选中
								this.list[i].ischecekbox=false;
								//length值重新计算
								this.lengths = 0;
							}else{
								//全部选中
								this.list[i].ischecekbox=true;
								//length值等于循环数组的下标
								this.lengths = this.list.length;
							}
						}
					},
					danxuans:function(index){
						if (this.list[index].ischecekbox) {
							//取消一个选中,当前按钮数组中判断的值变为false
							this.list[index].ischecekbox = false;
							//变量lengths相应减去一个
							this.lengths --;
						} else {
							//选中一个,当前按钮数组中判断的值改为true
							this.list[index].ischecekbox = true;
							//对应的变量加一
							this.lengths ++;
						}
						//判断变量lengths的值是否和list的下标是否相等判断是否全选
						if(this.lengths ==this.list.length){
							this.quanx=true
						}else{
							this.quanx=false
						}
					}
					
				}
			})

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <title>
      购物车
    </title>
  </head>
  
  <body>
    <div id="app">
      <template v-if="list.length">
        <table>
          <thead>
            <tr>
              <th>
              </th>
              <th>
                商品名称
              </th>
              <th>
                商品单价
              </th>
              <th>
                购买数量
              </th>
              <th>
                操作
              </th>
              <th>
                <input type="checkbox" @click="quanxuan" v-model="quanx" name="" id=""
                value="" />
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item , index) in list">
              <td>
                {{index+1}}
              </td>
              <td>
                {{item.name}}
              </td>
              <td>
                {{item.price}}
              </td>
              <td>
                <button type="button" @click="changeMondy(item,1)">
                  加
                </button>
                {{item.count}}
                <button type="button" @click="changeMondy(item,-1)" :disabled="item.count===1">
                  减
                </button>
              </td>
              <td>
                <button type="button" @click="handleRemove(index)">
                  移除
                </button>
              </td>
              <td>
                <input type="checkbox" name="" v-model="item.ischecekbox" @click.stop="danxuans(index)"
                id="" value="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div>
          总价：{{zongjia}}元
        </div>
      </template>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</html>

table{
				border-collapse:collapse;
				border: 1px solid #000000;
			}
			td,th{
				border-collapse:collapse;
				border: 1px solid #000000;
				padding: 15px;
				text-align: center;
			}