使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局

最新推荐文章于 2024-06-11 12:41:07 发布

会举重的薯片

最新推荐文章于 2024-06-11 12:41:07 发布

阅读量260

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_55930097/article/details/132328282

版权

使用了v-model指令来实现全选/全不选的功能，当全选框被点击时，isAllChecked的值会被改变。
使用了v-if指令来判断购物车中是否有商品，如果有商品则渲染商品列表，否则显示购物车为空的提示。
使用了v-for指令来遍历datalist数组，渲染每个商品项。
使用了@change事件来监听商品项的选择状态改变，当商品项被选中或取消选中时，handleItemChange方法会被调用。
使用了@click事件来监听减少数量和增加数量按钮的点击事件，分别调用item.number–和item.number++来改变商品数量。
使用了:disable属性绑定来控制减少数量和增加数量按钮的禁用状态。
使用了@click事件来监听删除按钮的点击事件，调用handleDel方法来删除对应的商品项

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border: 1px solid red;
      }
      li img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <ul>
        <li>
          <input
            type="checkbox"
            v-model="isAllChacked"
            @click="handleAllChange"
          />
          <span>全选/全不选</span>
        </li>
        <template v-if="datalist.length">
          <li v-for="(item,index) in datalist" :key="item.id">
            <div>
              <input
                type="checkbox"
                v-model="checkList"
                :value="item"
                @change="handleItemChange"
              />
            </div>
            <div>
              <img :src="item.poster" alt="" />
            </div>
            <div>
              <div>{{item.title}}</div>
              <div style="color: red">价格：{{item.price}}</div>
            </div>

            <div>
              <button @click="item.number--" :disable="item.number===1">
                -
              </button>
              {{item.number}}
              <button
                @click="item.number++"
                :disable="item.number===item.limit"
              >
                +
              </button>
            </div>

            <div>
              <button @click="handleDel(index,item.id)">删除</button>
            </div>
          </li>
        </template>
        <li v-else>购物车空空如也</li>

        <li>
          <div>总金额：{{sum()}}</div>
        </li>
      </ul>
    </div>
    <script>
      var obj = {
        data() {
          return {
            isAllChecked: false,
            chackList: [],
            datalist: [
              {
                id: 1,
                title: "商品1",
                price: 10,
                number: 1,
                poster:
                  "https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg",
                limit: 5,
              },
              {
                id: 2,
                title: "商品2",
                price: 20,
                number: 2,
                poster:
                  "	https://t8.baidu.com/it/u=4043579294,4057690895&fm…sec=1692118800&t=acd1394b1a053e97133a40c0289677f9",
                limit: 6,
              },
              {
                id: 3,
                title: "商品3",
                price: 30,
                number: 3,
                poster:
                  "https://gw.alicdn.com/bao/uploaded/i3/698598873/O1…wOdNnz2FPt9klYrZk_!!0-item_pic.jpg_300x300q90.jpg",
                limit: 7,
              },
            ],
          };
        },
        methods: {
          sum() {
            return this.checkList.reduce(
              (total, item) => total + item.price * item.number,
              0
            );
          },
          handleDel(index, id) {
            this.datalist.splice(index, 1);
            //同步更新数组
            this.chackList = this.chackList.filter((item) => item.id !== id);
            this.handleItemChange();
          },
          handleAllChange() {
            this.chackList = this.isAllChecked ? this.datalist : [];
          },
          handleItemChange() {
            if (this.datalist.length === 0) {
              this.isAllChecked = false;
              return;
            }
            this.isAllChecked = this.checkList.length === this.datalist.length;
          },
        },
      };
      var app = Vue.createApp(obj).mount("#box");
    </script>
  </body>
</html>

methods部分的方法如下：

sum()方法用于计算购物车中商品的总金额。通过使用reduce()方法遍历checkList数组，累加每个商品的价格乘以数量，最终返回总金额。
handleDel(index, id)方法用于处理删除商品的逻辑。通过使用splice()方法从datalist数组中删除指定索引的商品项，然后使用filter()方法从checkList数组中过滤掉对应的商品项，以保持两个数组的同步。最后调用handleItemChange()方法更新全选框的状态。
handleAllChange()方法用于处理全选框的改变逻辑。当全选框被点击时，如果全选框被选中，则将datalist数组赋值给checkList数组，表示所有商品被选中；如果全选框未被选中，则将checkList数组清空，表示所有商品都未被选中。
handleItemChange()方法用于处理商品项选择状态的改变逻辑。当商品项的选择状态发生改变时，如果datalist数组为空，则将全选框的状态设置为未选中；否则，将全选框的状态设置为checkList数组的长度与datalist数组长度相等时表示全选，否则表示未全选。