04 html 购物车

最新推荐文章于 2024-08-28 15:34:24 发布

学前端的坤坤bond

最新推荐文章于 2024-08-28 15:34:24 发布

阅读量107

点赞数 3

文章标签： css css3 javascript 其他笔记 html5

本文链接：https://blog.csdn.net/m0_64904350/article/details/140494465

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>购物车示例</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <style>
    [v-cloak] {
      display: none;
    }
    /*全局样式添加手型样式：*/
    * {
      cursor: pointer;
    }
    table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
    }
    th,
    td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }
    th {
      background: #5383c7;
      color: #ffffff;
      font-weight: 600;
      white-space: nowrap;
    }

    td:hover {
      background-color: rgb(162, 162, 162);
      color: white;
    }
  </style>
  <body>
    <div id="app" v-cloak>
      <template v-if="list.length">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>商品名称</th>
              <th>商品单价</th>
              <th>创建时间</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.time }}</td>
              <td>
                <button
                  @click="handleReduce(index)"
                  :disabled="item.count === 1"
                >
                  -
                </button>
                {{ item.count }}
                <button @click="handleAdd(index)">+</button>
              </td>
              <td>
                <button @click="handleRemove(index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div>总价：￥ {{ totalPrice }}</div>
      </template>
      <div v-else>购物车为空</div>
    </div>
    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="index.js"></script>
  </body>
  <script>
    let app = new Vue({
      el: "#app",
      data: {
        list: [
          {
            id: 1,
            name: "iPhone 7",
            price: 6188,
            time: "2024-05-23",
            count: 1,
          },
          {
            id: 2,
            name: "iPad  Pro",
            price: 5888,
            time: "2024-05-24",
            count: 1,
          },
          {
            id: 3,
            name: "MacBook",
            price: 21488,
            time: "2024-05-26",
            count: 1,
          },
        ],
      },
      computed: {
        totalPrice: function () {
          let total = 0; // 定义一个变量来保存总价
          for (let i = 0; i < this.list.length; i++) {
            // 遍历商品列表
            let item = this.list[i]; // 获取每个商品
            total += item.price * item.count; // 计算每个商品的总价并累加到总价中
          }

          return total.toString().replace(/\B(?=(\d{3})+$)/g, ","); // 将总价格式化为带逗号的字符串形式并返回
        },
      },

      methods: {
        handleReduce: function (index) {
          if (this.list[index].count === 1) return;
          this.list[index].count--;
        },
        handleAdd: function (index) {
          this.list[index].count++;
        },
        handleRemove: function (index) {
          this.list.splice(index, 1);
        },
      },
    });
  </script>
</html>