Vue实现购物车功能

(编辑：jimmy 日期: 2026/7/14 浏览：2)

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" />
</head>
<body>

  <div id="app" class="container">
    <table class="table">
      <thead>
        <tr>
          <th>产品编号</th>
          <th>产品名字</th>
          <th>购买数量</th>
          <th>产品单价</th>
          <th>产品总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item , index) in message">
          <td @click="jia(index)">{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
            <input type="text" v-model="item.quantity">
            <button type="button" class="btn tn-primary" @click="add(index)">+</button>
          </td>
          <td>{{item.price | filtermoney}}</td>
          <!--<td>{{arr[index].one}}</td>-->
          <td>{{item.price*item.quantity | filtermoney}}</td>
          <td>
            <button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
          </td>
        </tr>
        <tr>
          <td>总购买价  
          </td>
          <td>
            {{animatenum | filtermoney}}
          </td>
          <td>总购买数量
          </td>
          <td>

          </td>
          <td colspan="2">
            <button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-if="message.length===0">您的购物车为空</p>
  </div>
  <script src="/UploadFiles/2021-04-02/tween.js@16.3.4">

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持!

上一篇：JS ES6中setTimeout函数的执行上下文示例

下一篇：js轮播图透明度切换（带上下页和底部圆点切换）