vue 购物车合计效果

sunlizhen

于 2020-05-11 11:02:53 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 前端框架、插件

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/106049746

本文介绍了如何在Vue.js应用中实现购物车的总价计算功能。通过监听购物车内商品的数量变化，动态更新商品总价，展示实时的购物车合计金额。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="wrap">
    <el-table
      empty-text="购物车为空"
      :data="tableData"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%">
      <el-table-column
        label="商品名称"
        prop="name"
        width="100">
      </el-table-column>
      <el-table-column
        label="商品单价"
        prop="price"
        width="130">
      </el-table-column>
      <el-table-column
        label="购买数量"
        width="180"
        prop="num"
      >
        <template slot-scope="scope">
          <el-button @click="sub(scope.$index, scope.row)">-</el-button>
          <span>{
 
 {scope.row.num}}</span>
          <el-button @click="add(scope.$index, scope.row)">+</el-button>
        </template>

      <