基础购物车

1.                     arr:[
2.                         {
3.                             title:'商品1',
4.                             num:10,
5.                             shu:0
6.                         },
7.                         {
8.                             title:'商品2',
9.                             num:20,
10.                             shu:0
11.                         },
12.                         {
13.                             title:'商品3',
14.                             num:20,
15.                             shu:0
16.                         },
17.                         {
18.                             title:'商品3',
19.                             num:20,
20.                             shu:0
21.                         },
22.                         ],

1. <table class="table_ys">
2. <tr class="trr">
3. <th>名称</th><th>价格</th><th>数量</th><th>操作</th>
4. </tr>
5. <tr class="tr_ys" v-for="(item,index) in arr" :key="item" :style="{backgroundColor: (item.shu >0 ? 'red' : '#fff')}">
6. <td :key="item.title">{{item.title}}</td>
7. <td :key="item.num">{{item.num}}</td>
8. <td :key="item.shu">
9. <button @click="jian(index);zhongjia()" v-if="item.shu>0"> - </button>
10. <span>{{item.shu}}</span>
11. <button @click="jia(index);zhongjia()"> + </button></td>
12. <td>
13. <button @click="bianji(index)">编辑</button>
14. <button @click="shanchu(index);zhongjia()" :key="item.id">删除</button>
15. </td>
16. </tr>
17. <tr>
18. <td></td>
19. <td>总价:<span>{{zongjia}}</span></td>
20. <td>总数量:<span>{{zongshul}}</span></td>
21. <td></td>
22. </tr>
23. </table>

1.                         ok:false,
2. go:false,
3.                         qwe:[{
4.                             title:'',
5.                             num:'',
6.                             shu:''
7.                         }],
8.                         ind:'',
9.                         ma:'',
10.                         jg:'',
11.                         numb:'',
12.                         zongjia:0,
13.                         zongshul:0,
14.                         color:'red'

1.   add(){
2. this.ok = !this.ok
3.                 },
4.                jia(index){
5. this.arr[index].shu++;
6.                },
7.                jian(index){
8. this.arr[index].shu--;
9.                },
10.                shanchu(index){
11.                 console.log(index);
12. this.arr.splice(index,1);
13.                },
14.                bianji(index){
15. this.ind = index
16.                 console.log(index);
17. this.go = !this.go;
18. // this.qwe.value = this.arr[index].value;
19. this.qwe.title = this.arr[index].title;
20. this.qwe.num = this.arr[index].num;
21. this.qwe.shu = this.arr[index].shu;
22. // this.qwe.title = this.arr[index].shu
23.                },
24.                qdbj(){
25. this.go = !true;
26. this.arr[this.ind].title=this.qwe.title;
27. this.arr[this.ind].num=this.qwe.num;
28. this.arr[this.ind].shu=this.qwe.shu;
29.                },
30.                hanshu(){
31. this.ok = !true; 
32. this.arr.push({
33.                     title:this.ma,
34.                     num:this.jg,
35.                     shu:this.numb
36.                 })
37.                },
38.                zhongjia(){
39. this.zongshul=0
40. this.zongjia=0;
41. for (let i = 0; i < this.arr.length; i++) {
42. this.zongjia+=this.arr[i].num*this.arr[i].shu
43. this.zongshul+=this.arr[i].shu;
44.                 }
45.                }