请观赏

 <style>
    [v-cloak]{
        display: none;
    }
 </style>

<div id="app" v-cloak>
        <h3 class="text-center">我的购物车</h3>
        <template v-if="list.length">
            <button @click="sort()">
                <span v-show="show">升序</span>
                <span v-show="!show">降序</span>
            </button>
            
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="flag" @change="checkAll">全选</th>
                        <th>商品编码</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>商品小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list" :key="index">
                        <td><input type="checkbox" v-model="item.checked" @change="check"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.productName}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <button @click="decrement(index)">-</button>
                            <input type="text" v-model="item.count">
                            <button @click="increment(index)">+</button>
                        </td>
                        <td>
                            {{item.price*item.count}}
                        </td>
                        <td><button @click="del(index)">删除</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7" class="text-right"><button @click="checkedDel">选中删除</button><strong></strong>选中总价：{{totalPrice}}</td>
                    </tr>
                </tfoot>
            </table>
        </template>
        <div class="text-center" v-else>购物车为空</div>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            flag:false,
            show:true,
            checkDate:[]
            
        },
        methods:{
            //数量减
            decrement(index){
                this.list[index].count--;
            },
            //数量加
            increment(index){
                this.list[index].count++;
            },
            //反选
            check(){
                this.checkDate=this.list.filter(item=>{
                    return item.checked==true
                })
                if(this.checkDate.length==this.list.length){
                    this.flag=true
                }else{
                    this.flag=false
                }
            },
            //全选
            checkAll(){
                for(var i=0;i<this.list.length;i++){
                    if(this.flag==true){
                        this.list[i].checked=true;
                    }else{
                        this.list[i].checked=false

                    }
                };
                
            },
            //选中删除
            checkedDel(){
                let delList = this.list.filter((item,index)=>{
                    return item.checked == false;
                });
                this.list = delList;
            },
            //删除
            del(index){
                this.list.splice(index,1)
            },
            
            sort(){
                this.show=!this.show
                if(this.show){
                    this.list.sort(function(a,b){
                        return b.price-a.price
                    })
                }else{
                    this.list.sort(function(a,b){
                        return a.price-b.price
                    })
                }
            }

        },
        computed:{
            //总价
            totalPrice(){
                let total=0;
                this.list.forEach((item,index)=>{
                    if(item.checked){
                        total+=item.price*item.count
                    }
                    
                })
                return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
            }
        },
        watch:{

        }
    })

</script>