VUE实现简单的购物车功能

最新推荐文章于 2024-08-17 16:03:52 发布

他是信仰

最新推荐文章于 2024-08-17 16:03:52 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42634971/article/details/89599120

版权

VUE实现简单的购物车功能

要实现的功能图片

在这里插入图片描述
需要用到的js和css
vue.js和mock.js可使用在线的，也可以使用下载下来的
index.css和index.js是自己的

  <link rel="stylesheet" href="index.css">
  <script src="vue.js"></script>
  <script src="mock.js"></script>
  <script src="index.js"></script>

看图可知，应该用table，我们分为thead tbody tfoot
编写thead

<thead>
     <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>购买数量</th>
      <th>操作</th>
     </tr>
    </thead>

由于tbody里的数据是使用mock随机读取出来的，所以需要在js里做以下处理

data: {
  list: []
 },
 created: function() {
  var data = Mock.mock({
   "list|1-10": [{
    "id": "@integer(1001,9999)",
    "name": "@string(10,20)",
    "price": "@integer(100,999)",
    "count": "@integer(1,10)"
   }]
  });
  this.list = data.list;
 }

下面来写tbody,这里做了一个友好处理，如果没有商品，提示没有商品，赶紧添加吧！
由于加减删除操作都需要用到下标，所以这里就一块循环了下标，点击+执行handleAdd(下标)，点击-执行handleMinus(下标)，点击删除执行handleRemove(下标)

<tbody>
     <!-- 如果没有商品 -->
     <template v-if="list.length===0">
      <tr>
       <td colspan="5" class="empty">没有商品，赶紧添加吧！</td>
      </tr>
     </template>
     <!-- 如果有商品 -->
     <template v-else>
      <tr v-for="(item, index) in list">
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
       <td>{{item.price}}</td>
       <td>
        <button :disabled="item.count===1" @click="handleMinus(index)">-</button>
        <input type="text" v-model="item.count">
        <button @click="handleAdd(index)">+</button>
       </td>
       <td>
        <button @click="handleRemove(index)">删除</button>
       </td>
      </tr>
     </template>
    </tbody>

下面在index.js里写加减删除的方法

methods: {
  // 累加商品数量
  handleAdd: function(index) {
   var item = this.list[index];
   item.count++;
  },
  // 递减商品数量
  handleMinus: function(index) {
   var item = this.list[index];
   item.count--;
  },
  // 移除商品
  handleRemove: function(index) {
   this.list.splice(index, 1);
  }
 }

现在我们就可以读取出来数据了，接下来写tfoot
这里数组长度就是商品件数，总计多少元，需要在写一个方法totalPrice去计算
并且图中的总价格也是经过处理的，这里用了过滤器，调用了formatPrice

<tfoot>
     <tr>
      <td colspan="5">
       共{{list.length}}件商品，总计{{totalPrice|formatPrice}}元。
      </td>
     </tr>
    </tfoot>

下面我们来写totalPrice

computed: {
  // 计算属性：总计
  totalPrice: function() {
   var sum = 0;
   for (var i = 0; i < this.list.length; i++) {
    var item = this.list[i];
    sum += (item.price * item.count);
   }
   return sum;
  }
 }

formatPrice

filters: {
  // 过滤器：格式化金额
  formatPrice: function(price) {
   return "￥" + price.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
  }
 }

到此就写完了，下面我把全部代码奉上
index.html代码

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 购物车 案例</title>
  <link rel="stylesheet" href="index.css">
 </head>
 <body>
  <div id="app">
   <table>
    <thead>
     <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>购买数量</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <!-- 如果没有商品 -->
     <template v-if="list.length===0">
      <tr>
       <td colspan="5" class="empty">没有商品，赶紧添加吧！</td>
      </tr>
     </template>
     <!-- 如果有商品 -->
     <template v-else>
      <tr v-for="(item, index) in list">
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
       <td>{{item.price|formatPrice}}</td>
       <td>
        <button :disabled="item.count===1" @click="handleMinus(index)">-</button>
        <input type="text" v-model="item.count">
        <button @click="handleAdd(index)">+</button>
       </td>
       <td>
        <button @click="handleRemove(index)">删除</button>
       </td>
      </tr>
     </template>
    </tbody>
    <tfoot>
     <tr>
      <td colspan="5">
       共{{list.length}}件商品，总计{{totalPrice|formatPrice}}元。
      </td>
     </tr>
    </tfoot>
   </table>
  </div>
  <script src="vue.js"></script>
  <script src="mock.js"></script>
  <script src="index.js"></script>
 </body>
</html>

index.js

var app = new Vue({
 el: "#app",
 data: {
  list: []
 },
 created: function() {
  var data = Mock.mock({
   "list|1-10": [{
    "id": "@integer(1001,9999)",
    "name": "@string(10,20)",
    "price": "@integer(100,999)",
    "count": "@integer(1,10)"
   }]
  });
  this.list = data.list;
 },
 methods: {
  // 累加商品数量
  handleAdd: function(index) {
   var item = this.list[index];
   item.count++;
  },
  // 递减商品数量
  handleMinus: function(index) {
   var item = this.list[index];
   item.count--;
  },
  // 移除商品
  handleRemove: function(index) {
   this.list.splice(index, 1);
  }
 },
 computed: {
  // 计算属性：总计
  totalPrice: function() {
   var sum = 0;
   for (var i = 0; i < this.list.length; i++) {
    var item = this.list[i];
    sum += (item.price * item.count);
   }
   return sum;
  }
 },
 filters: {
  // 过滤器：格式化金额
  formatPrice: function(price) {
   return "￥" + price.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
  }
 }
});

index.css

*{margin:0; padding:0;}
/* 表格：宽800，居中，没有边框间隙 */
table{width:800px; margin:0 auto; border-spacing:0;}
/* 标题行背景色 */
thead{background:#EFEFEF;}
/* 表格和里面的每列：边框 */
table,th,td{border:1px solid #CCC;}
/* 每列：内边距 */
th,td{padding:10px 20px;}
/* 没有商品时 */
.empty{text-align:center; color:orange;}

end…