用Vue实现简单购物车功能

最新推荐文章于 2024-04-27 09:42:37 发布

这里是不会敲代码的三木

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量887

点赞数 1

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_38594742/article/details/120353851

版权

这是最简单的购物车功能,或许有时间的话可以添加点功能

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Vue基础 -- 购物车</title>
  <style>
  </style>
</head>

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>商品单价</th>
          <th>商品数量</th>
          <th>商品总价</th>
          <th>商品操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
          some()方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
          every()方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。 
          它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。
          some和every方法还可以接受第二个参数，用来绑定参数函数内部的this变量。
        -->
        <tr v-if="goodsData.every(item => item.count == 0)">
          <td>购物车为空</td>
        </tr>
        <template v-for="(item,index) in goodsData">
          <tr :key = "item._id" v-if="item.count > 0">
            <td>{{item._id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
              <button @click="item.count--">-</button>
              <span>{{item.count}}</span>
              <button @click="item.count++">+</button>
            </td>
            <td>{{item.price * item.count}}</td>
            <td>
              <!-- 
                splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。
                splice()的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。
               -->
              <button @click="goodsData.splice(index,1)">删除</button>
            </td>
          </tr>
        </template>
       
      </tbody>
    </table>
    <p>合计: ¥ {{totalPrice()}} 元</p>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          goodsData: [
            {
              _id: 1,
              name: '苹果',
              price: '10',
              count: 20
            },
            {
              _id: 2,
              name: '香蕉',
              price: '20',
              count: 10
            },
            {
              _id: 3,
              name: '梨',
              price: '10',
              count: 15
            },
            {
              _id: 4,
              name: '葡萄',
              price: '10',
              count: 1
            },
          ]
        }
      },
      // 方法放的地方
      methods: {
        // 封装计算总价
        totalPrice(){
          // reduce()方法依次处理数组的每一个成员,最终累计为一个值
          const totalPrice = this.goodsData.reduce((sum,item) => {
            console.log(sum,item);
            return sum + item.price * item.count;
            
          },0);
          return totalPrice;
        }
      }
    });
  </script>

</body>

</html>

这里是不会敲代码的三木

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用Vue实现简单购物车功能

这是最简单的购物车功能,或许有时间的话可以添加点功能<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue基础 -- 购物车</title> <style> </style></head><body> <div id="app"> <table>
复制链接

扫一扫