1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <meta name=referrer content=never>
    9.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    10.     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    11.     <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    12.     <style>
    13.         .img{
    14.             width: 30px;
    15.             height: 50px;
    16.         }
    17.         .name{
    18.             font-size: 13px;
    19.         }
    20.         .number{
    21.             width: 40px;
    22.         }
    23.         .delete{
    24.             width: 70px;
    25.             height: 40px;
    26.             border: none;
    27.             border-radius: 5px;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.   <div id="app" class="container">
    33.   <h2 class="text-center text-success">购物车</h2>
    35.   <table class="table table-bordered table-hover">
    36.     <thead>
    37.       <tr>
    38.         <th>全选 <input type="checkbox" v-model="checkAll" ></th>
    39.         <th>商品</th>
    40.         <th>单价</th>
    41.         <th>数量</th>
    42.         <th>小计</th>
    43.         <th>操作</th>
    44.       </tr>
    45.     </thead>
    46.     <tbody>
    47.       <tr v-for="(item,index) of products">
    48.        <td> <input type="checkbox" v-model="item.isSelected"></td>
    49.        <td class="name"><img class="img" :src="item.productCover" alt=""></img>{{item.productName}}</td>
    50.        <td>{{item.productPrice}}</td>
    51.        <td><input type="number" class="number" min="1" v-model.number="item.productCount"></td>
    52.        <td>{{item.productPrice*item.productCount | format(2)}}</td>
    53.        //<td><button class="delete btn-danger" @click="handleDelete(index)">删除</button></td>
    54.        <td><button class="delete btn-danger" @click="handleDelete(item)">删除</button></td>
    55.       </tr>
    56.     </tbody>
    57.   </table>
    58.   <p class="text-left">总价格:{{sum | format(2)}}</p>
    59.  </div>
    62.     <script>
    63.         /* ctrl+shift+p */
    64.         var vm=new Vue({
    65.             el:"#app",
    66.             data:{
    67.                 products:[],
    68.             },
    69.             //页面装载时执行
    70.             mounted() {
    71.                 axios.get('./data/carts.json').then(res=>{
    72.                   return this.products=res.data;
    73.                 })
    74.             },
    75.             filters:{
    76.                 format(val,params){
    77.                     return "$"+val.toFixed(params);   
    78.                 }
    79.             },
    80.             computed: {
    81.                 checkAll:{
    82.                     get(){
    83.                         return this.products.every(item=>item.isSelected)
    84.                     },
    85.                     set(val){
    86.                        this.products.forEach(item=>item.isSelected=val)
    87.                     }
    88.                 },
    89.                 sum(){
    90.                     var total=0;
    91.                     this.products.forEach(item=>{
    92.                         total=item.productCount*item.productPrice+total
    93.                     })
    94.                     return total
    95.                 }
    96.             },
    97.             methods: {
    98.                /*  handleDelete(index){
    99.                   this.products.splice(index,1)
    100.                 } */
    101.                 handleDelete(item){
    102.                     var products=this.products.filter(value=>value!==item);
    103.                     this.products=products;
    104.                 }
    105.             },
    106.         })
    107.     </script>
    108. </body>
    109. </html>