vue-10-购物车案例（1）-复习

最新推荐文章于 2024-09-05 16:55:11 发布

亭_台楼阁

最新推荐文章于 2024-09-05 16:55:11 发布

阅读量118

点赞数 3

分类专栏： vue专栏笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_69378630/article/details/139216492

版权

vue专栏笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这部分实现的多选框的总金额计算

<div id="box">
    <ul>

      <li>
        <div>
          <input type="checkbox">
          <span>全选/全不选</span>
        </div>
      </li>

      <li v-for="item in datalist" :key="item.id">

        <div>
          <input type="checkbox" v-model="checkList" :value="item">
        </div>

        <div>
          <img :src="item.poster" alt="">
        </div>

        <div>
          <div>{{item.title}}</div>
          <div style="color: red;">价格：{{item.price}}</div>
        </div>

        <div>
          <button>-</button>
          {{item.number}}
          <button>+</button>
        </div>

        <div>
          <button>删除</button>
        </div>

      </li>

      <li>
        <div>总金额：{{sum()}}</div>
      </li>
    </ul>


  </div>

<script>
    var obj = {
      data() {
        return {
          // 勾选的商品列表
          checkList: [],

          datalist: [{
            id: 1,
            title: "商品1",
            price: 10,
            number: 1,
            poster:
              "https://p0.meituan.net/movie/dc2fed6001e809e4553f90cc6fad9a59245170.jpg@1l_1e_1c_128w_180h",
            limit: 5,
          },

         //省略两个...
          ]

        }

      },
      methods: {

        sum() {
          // 方法一
          var total = 0

          for (let i = 0; i < this.checkList.length; i++) {
            total = this.checkList[i].number * this.checkList[i].price
          }
          return total

        }

      },
    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

或

 methods: {
        sum() {
     
          // 方法二；利用js实现
          return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
        }
      },

截图：