1. <body>
    2.     <style>
    3.     * {
    4.     list-style: none;
    5.     box-sizing: border-box;
    6.     padding: 0;
    7.     margin: 0;
    8. }
    9. body {
    10.     text-align: center;
    11. }
    12. ul {
    13.     width: 80%;
    14.     height: 500px;
    15.     margin: 0 auto;
    16.     display: flex;
    17.     flex-wrap: wrap;
    18.     text-align: center;
    19.     margin-top: auto 0;
    20.     line-height: 2;
    21. }
    22. ul img {
    23.     width: 100px;
    24.     height: 100px;
    25.     margin-top: 30px;
    26. }
    27. ul li {
    28.     width: 25%;
    29.     border: 1px solid rgb(15, 15, 15);
    30. }
    31. ul li p {
    32.     font-weight: 600;
    33.     font-size: 14px;
    34. }
    35. ul li span {
    36.     color: red;
    37.     font-size: 16px;
    38.     font-weight: 600;
    39. }
    40. table {
    41.     width: 80%;
    42.     height: 30px;
    43.     margin: 50px auto;
    44.     border-collapse: collapse;
    45. }
    46. table tr td img {
    47.     width: 50px;
    48.     height: 50px;
    49. }
    50. </style>
    51. <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    52. <div id='app'>
    53.     <h1>{{message}}</h1>
    54. <!-- 所有商品列表 -->
    55. <ul>
    56.         <li v-for='item,index in goodList'>
    57.             <div>
    58.             <img :src="item.img_list_url" alt="">
    59.                 <p>{{item.title}}</p>
    60. <span>${{item.price}}</span>
    61. <button @click="jiaru(item)">加入购物车</button>
    62. </div>
    63. </li>
    64. </ul>
    65. <table border="1">
    66.     <thead>
    67.     <tr>
    68.     <th>选中</th>
    69. <th>名称</th>
    70. <th>图片</th>
    71. <th>价格</th>
    72. <th>数量</th>
    73. </tr>
    74. </thead>
    75. <tr v-for='item,index in shopCar'>
    76.     <td><input type="checkbox" :value="item.Id" v-model="selected"></td>
    77. <td>{{item.title}}</td>
    78. <td><img :src='item.img_list_url'></td>
    79. <td>${{item.price}}</td>
    80. <td>
    81.     <button @click='reduce(index)'> - </button>
    82. {{item.count}} 
    83. <button @click='()=>{item.count++; $forceUpdate();}'> + </button> 
    84. </td>
    85. </tr>
    86. <th colspan="5">选中的商品总价:{{total}}</th> 
    87. </table>
    89. </div>
    90. <script>
    91.     const app = new Vue({
    92.         el: '#app',
    93.         data: {
    94.             message: '购物车',
    95.             goodList: [], // 所有商品列表
    96.             shopCar: [],  // 购物车列表
    97.             selected : [] // 购物车中选中的商品列表
    98.         },
    99.         computed: {
    100.             // 计算总价
    101.             total(){
    102.                 let sum = 0;
    103.                 this.selected.forEach(id=>{
    104.                     var goods = this.shopCar.find(goods=>{
    105.                         return goods.Id == id
    106.                     })
    107.                     if(goods){
    108.                         sum += goods.price * goods.count
    109.                     }
    110.                 })
    111.                 return sum
    112.             }
    113.         },
    114.         methods: {
    115.             // 添加购物车函数
    116.             jiaru(item) {
    117.                 // 判断购物车中是否有这个商品
    118.                 var goods = this.shopCar.find(goods=>{
    119.                     return goods.Id == item.Id
    120.                 })
    121.                 if(goods){
    122.                     // 如果有, 商品数量+1, 并更新视图
    123.                     goods.count ++;
    124.                     this.$forceUpdate()
    125.                 }else{
    126.                     // 不存在, 初始化商品数量为1,并添加到购物车列表
    127.                     item.count = 1;
    128.                     this.shopCar.push(item)
    129.                 }
    130.             },
    131.             // 商品数量减少
    132.             reduce(index){
    133.                 if(this.shopCar[index].count > 1){
    134.                     // this.shopCar[index].count --;
    135.                     // this.$forceUpdate(); //强制刷新
    136.                     var goods = this.shopCar[index]
    137.                     goods.count --
    138.                     this.$set(this.shopCar, index, goods)
    139.                 }else{
    140.                     if(confirm("是否要删除商品")){
    141.                         // 找到购车这个商品的id
    142.                         var goodId = this.shopCar[index].Id;
    143.                         // 判断这个id在已选中列表中是否存在, 如果存在,说明这个商品是选中状态,先把它的id删掉, 取消选中
    144.                         for(let i = 0; i < this.selected.length; i++ ){
    145.                             if(this.selected[i] == goodId){
    146.                                 this.selected.splice(i, 1);
    147.                                 break;
    148.                             }
    149.                         }
    151.                         // 把商品从购物车列表删掉
    152.                         this.shopCar.splice(index,1)
    153.                     }
    154.                 }
    155.             }
    156.         },
    157.         created() {
    158.             //对象已经创建, 请求数据
    159.             fetch("./goodList.json").then(res => {
    160.                 return res.json()
    161.             }).then(data => {
    162.                 this.goodList = data.slice(0, 8)
    163.             })
    164.         }
    165.     })
    166. </script>
    167. </body>

    goodList.json