1.gif

1.data/carts.json

  1. [
  2.     {
  3.         "isSelected": true,
  4.         "productCover": "https://img3.doubanio.com/view/subject/m/public/s33510542.jpg",
  5.         "productName": "纸上行舟",
  6.         "productInfo": "青年作者黎幺短篇小说首度结集",
  7.         "productPrice": 57.33,
  8.         "productCount": 3,
  9.         "id": "0001"
  10.     },
  11.     {
  12.         "isSelected": true,
  13.         "productCover": "https://img3.doubanio.com/view/subject/m/public/s33497735.jpg",
  14.         "productName": "我可能得抑郁症了！舟",
  15.         "productInfo": "青年作者黎幺短篇小说首度结集",
  16.         "productPrice": 54.26,
  17.         "productCount": 2,
  18.         "id": "0002"
  19.     },
  20.     {
  21.         "isSelected": true,
  22.         "productCover": "https://img3.doubanio.com/view/subject/m/public/s33474961.jpg",
  23.         "productName": "绕日飞行",
  24.         "productInfo": "驯马、飞行、成长、爱情",
  25.         "productPrice": 22.67,
  26.         "productCount": 3,
  27.         "id": "0003"
  28.     }
  29. ]

2..html

  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" @change="change"></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 of products">
  48.         <td> <input type="checkbox" v-model="item.isSelected" @change="handleItem"></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(item)">删除</button></td>
  54.       </tr>
  55.     </tbody>
  56.    </table>
  57.      <p class="text-left">总价格:{{sum() | format(2)}}</p>
  58.  </div>
  61.     <script>
  62.         /* ctrl+shift+p */
  63.         var vm=new Vue({
  64.             el:"#app",
  65.             data:{
  66.                 products:[],
  67.                 checkAll:false,
  68.                 check:false,
  69.             },
  70.             //页面装载时执行
  71.             mounted() {
  72.                 axios.get('./data/carts.json').then(res=>{
  73.                   return this.products=res.data;
  74.                 })
  75.                 this.handleItem()   //进入这个函数时就执行一下handleItem()
  76.             },
  77.             filters:{
  78.                 /* val就是msg   params就是管道修饰符("|")后面函数传递过来的参数*/
  79.                 format(val,params){
  80.                     return "$"+val.toFixed(params);   
  81.                 }
  82.             },
  83.             methods: {
  84.                 change(){
  85.                     this.products.forEach(item=>item.isSelected=this.checkAll)
  86.                 },
  87.                 handleItem(val){
  88.                     this.checkAll=this.products.every(item=>item.isSelected)
  89.                 },
  90.               //总价求和
  91.                 sum(){
  92.                     var total=0;
  93.                     this.products.forEach(item=>{
  94.                         total=item['productPrice']*item['productCount']+total
  95.                     })
  96.                     return total
  97.                 },
  98.               //点击删除
  99.               handleDelete(item){
  100.                 var products=this.products.filter(value=>value!==item);
  101.                 this.products=products
  102.               }
  103.             },
  104.         })
  105.     </script>
  106. </body>
  107. </html>

3.使用Go Live查看效果