Please watch the

<style> [v-cloak]{ display: none; </style> <div id="app" v-cloak> <h3 class="text-center"> </h3> <template v-if="list.length"> <button id="app" v-cloak> <h3 class="text-center" @ click = "sort ()" > < span v - show = "show" > ascending < / span > < span v - show = "!" Show "> descending </span> </button> <table class="table table-bordered"> <thead> <tr> <th><input type="checkbox" V-model ="flag" @ change = "checkAll" > all < / th > < th > commodity code < / th > < th > commodity name < / th > < th > commodity prices < / th > < th > quantity < / th > < th > merchandise subtotal < / th > < th > action < / 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)" > delete < / button > < / td > < / tr > < / tbody > < tfoot > < tr > < td colspan = "7" class = "text - right" > "button @click="checkedDel"> </button>< /strong> {{totalPrice}} < / td > < / tr > < / tfoot > < / table > < / template > < div class = "text - center" v - else > shopping cart is empty < / div > < / div > < / body > <script> new Vue({ el:"#app", data:{ flag:false, show:true, checkDate:[] }, Methods :{// retirement (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 } }; }, // Select Delete checkedDel(){let delList = this.list. Filter ((item,index)=>{return item.checked == false; }); this.list = delList; }, // delete 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.rice -b.rice})}}}, computed:{// total price 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>Copy the code