1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <link rel="stylesheet" href="bootstrap.css">
    8. </head>
    9. <body>
    10. <div id="app">
    11.   <div class="container">
    12.     <div class="row">
    13.       <h2 class="text-danger">购物车</h2>
    14.       <table class="table table-bordered">
    15.         <tr>
    16.           <td>
    17.             全选 <input type="checkbox"
    18.                       v-model="checkAll"
    19.                       @change="changeAll">
    20.             {{checkAll}}
    21.           </td>
    22.           <td>
    23.             商品
    24.           </td>
    25.           <td>
    26.             单价
    27.           </td>
    28.           <td>
    29.             数量
    30.           </td>
    31.           <td>
    32.             小计
    33.           </td>
    34.           <td>
    35.             操作
    36.           </td>
    37.         </tr>
    38.         <!--
    39.           isSelected: true
    40.           productCount: 3
    41.           productCover: "xxxxxxx"
    42.           productInfo: "颜色：Node.js学习"
    43.           productName: "深入浅出Node.js"
    44.           productPrice: 57.8
    45.         -->
    46.         <tr v-for="(item, index) in products" :key="index">
    47.           <td>
    48.             <input type="checkbox"
    49.                    @change="changeOne"
    50.                    v-model="item.isSelected">
    51.           </td>
    52.           <td>
    53.             <img :src="item.productCover" alt="">
    54.             {{item.productInfo}}
    55.           </td>
    56.           <td>
    57.             {{item.productPrice}}
    58.           </td>
    59.           <td>
    60.             <input type="number" v-model="item.productCount" min="1">
    61.           </td>
    62.           <td>
    63.             {{item.productPrice * item.productCount | toRMB}}
    64.           </td>
    65.           <td>
    66.             <button class="btn btn-danger"
    67.                     @click="remove(index)">删除</button>
    68.           </td>
    69.         </tr>
    70.         <tr>
    71.           <!--colspan 合并单元格-->
    72.           <td colspan="6">总价：{{ sum() | toRMB}}</td>
    73.         </tr>
    74.       </table>
    75.     </div>
    76.   </div>
    77. </div>
    79. <script src="axios.js"></script>
    80. <script src="vue.js"></script>
    81. <script>
    82.   let vm = new Vue({
    83.     el: '#app',
    84.     data: {
    85.       checkAll: true,
    86.       products: []
    87.     },
    88.     created() {
    89.       this.getData();
    90.     },
    91.     filters: {
    92.       toRMB(val, num = 2) {
    93.         if (!val) return '0.00';
    94.         return '￥' + val.toFixed(num)
    95.       }
    96.     },
    97.     methods: {
    98.       getData() {
    99.         axios.get('carts.json').then(({data}) => {
    100.           this.products = data;
    101.         })
    102.       },
    103.       changeAll() {
    104.         // 当 checkAll 选中时，checkAll 是 true，下面的两条都要选中，即这两条的 isSelected 为 true；当 checkAll 没选中的时候，checkAll 是 false，下面的都不选中，即 isSelected 都是 false；所以当 item 的 isSelected 和 checkAll；
    105.         this.products.forEach(item => item.isSelected = this.checkAll);
    106.       },
    107.       changeOne() {
    108.         // 点击每个 checkbox 时，去校验每条数据的 isSelected 是否都为 true，如果都为 true，checkAll 就应该为 true；否则，checkAll 就是 false；
    109.         // every 方法
    110.         this.checkAll = this.products.every(item => item.isSelected);
    111.       },
    112.       remove(index) {
    113.         this.products.splice(index, 1);
    114.       },
    115.       sum() {
    116.         // 计算总价：只计算 checkbox 选中的商品
    117.         let selected = this.products.filter(item => item.isSelected);
    118.         /*let total = 0;
    119.         selected.forEach(item => {
    120.           total += item.productPrice * item.productCount;
    121.         });
    122.         return total;*/
    123.         return selected.reduce((prev, next) => {
    124.           return prev + next.productPrice * next.productCount
    125.         }, 0);
    126.       }
    127.     }
    128.   })
    130. </script>
    131. </body>
    132. </html>