cart.gif

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

一、sum()求和带来的问题

  1. //只要products改变的时候,sum函数就会触发。这样不利于性能优化

二、使用computed属性改造代码

2-1 计算属性控制选中和没有选中的状态

  1. var vm = new Vue({
  2.             el: "#app",
  3.             ...
  4.             computed:{
  5.                 checkAll:{
  6.                     /* products值变化时会重新计算 */
  7.                     get(){
  8.                         return this.products.every(item=>item.isSelected)
  9.                     },
  10.                     set(val){
  11.                         //给checkbox赋值的时候触发
  12.                         this.products.forEach(item=>item.isSelected = val)
  13.                     }
  14.                 }
  15.             },
  16.             data: {
  17.                 products: []
  18.             },
  19.             mounted() {
  20.                 axios.get('./data/carts.json').then(res => {
  21.                     this.products = res.data
  22.                 })
  24.             }
  26.         })

2-2 计算总价格

  1. computed:{
  2.                ....
  3.                 sum(){
  4.                     /* sum的值会被缓存,如果依赖的数据没有变化不会重新执行 */
  5.                     var total = 0;
  6.                     this.products.forEach(item=>{
  7.                         total = item['productPrice']*item['productCount']+total;
  8.                     })
  9.                     return total;
  10.                 }
  11.             }