DDR爱好者之家

Vue实现购物车功能
站长资源 2024/11/27 佚名
39 1538
DDR爱好者之家 Design By 杰米

效果图：

Vue实现购物车功能

代码如下：

<!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">


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持!
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米