vue-购物车小例子

最新推荐文章于 2024-02-22 10:01:20 发布
黑夜来袭Z
最新推荐文章于 2024-02-22 10:01:20 发布
阅读量153
点赞数 1
分类专栏： JS 文章标签： vue
本文链接：https://blog.csdn.net/z1844306480/article/details/113932762
版权
JS 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
      }
      .shopCar {
        width: 500px;
        margin: 200px auto;
      }
      .title {
        width: 100%;
        height: 80px;
        background-color: rgb(73, 167, 167);
        text-align: center;
        line-height: 80px;
      }
      .shopRow {
        position: relative;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid blue;
      }
      .shopRow img {
        width: 40px;
        height: 40px;
        margin: 5px;
      }
      .shopRow .shopName {
        position: absolute;
        top: 0;
        left: 50px;
      }
      .changeNum {
        position: absolute;
        top: 0;
        left: 170px;
      }
      .changeNum a {
        display: inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 20px;
        vertical-align: middle;
        background-color: gray;
      }
      .changeNum input {
        height: 25px;
        width: 100px;
      }
      .shopRow .delete {
        position: absolute;
        top: 0;
        right: 50px;
        font-size: 30px;
        color: red;
        font-weight: 400;
      }
      .sum {
        text-align: right;
        line-height: 50px;
        height: 50px;
        background-color: rgb(90, 194, 121);
      }
      .sum button {
        height: 30px;
        margin: 0 10px;
        /* vertical-align: middle; */
        width: 50px;
      }
      .sum label {
        display: inline-block;
        /* line-height: 50px; */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <shop-car></shop-car>
    </div>
    <script>
      var shopCarTitle = {
        template: `<!-- 标题 -->
      <div class="title">我的商品</div>`,
      };
      var shopCarList = {
        props: ["bookList"],
        // 子组件内用:value绑定input的值而不用v-model是为了防止子组件对父组件的数据进行修改，并且使用了v-model后无法监听change事件
        template: `<!-- 列表 -->
      <div>
        <div class="shopRow" v-for="(item,index) in bookList" :key="item.id">
          <img :src="item.img" alt="" />
          <div class="shopName" v-text="item.name">TLC彩电</div>
          <div class="changeNum">
            <a href="#" @click="sub(item.id,$event)">-</a>
            <input type="text" :value="item.num" @change="numChange(item.id,$event)"/>
            <a href="#" @click="add(item.id,$event)">+</a>
          </div>
          <a href="#" class="delete" @click="delShop(item.id)">x</a>
        </div>
      </div>`,
        methods: {
          sub: function (id, event) {
            this.$emit("num-change", {
              id: id,
              event: event,
              type: "sub",
            });
          },
          add: function (id, event) {
            this.$emit("num-change", {
              id: id,
              event: event,
              type: "add",
            });
          },
          numChange: function (id, event) {
            this.$emit("num-change", {
              id: id,
              value: event.target.value,
              type: "input",
            });
          },
          delShop(id) {
            this.$emit("del-shop", id);
          },
        },
      };
      var shopCarSum = {
        props: ["totalPrice"],
        template: `<!-- 结算 -->
      <div class="sum">
        <label v-text="totalPrice">总价:5000</label>
        <button>结算</button>
      </div>`,
      };
      Vue.component("shop-car", {
        template: `<div class="shopCar">
      <shop-car-title></shop-car-title>
      <shop-car-list :bookList='list' @num-change="numChange" @del-shop="handelDelete"></shop-car-list>
      <shop-car-sum :totalPrice="totalPrice"></shop-car-sum>
    </div>`,
        components: {
          "shop-car-title": shopCarTitle,
          "shop-car-list": shopCarList,
          "shop-car-sum": shopCarSum,
        },
        data: function () {
          return {
            uname: "张三",
            list: [
              {
                id: 1,
                name: "TCL彩电",
                price: 1000,
                num: 1,
                img: "img/a.jpg",
              },
              {
                id: 2,
                name: "机顶盒",
                price: 1000,
                num: 1,
                img: "img/b.jpg",
              },
              {
                id: 3,
                name: "海尔冰箱",
                price: 1000,
                num: 1,
                img: "img/c.jpg",
              },
              {
                id: 4,
                name: "小米手机",
                price: 1000,
                num: 1,
                img: "img/d.jpg",
              },
              {
                id: 5,
                name: "PPTV电视",
                price: 1000,
                num: 2,
                img: "img/e.jpg",
              },
            ],
          };
        },
        computed: {
          totalPrice: function () {
            var sum = 0;
            this.list.forEach((value) => {
              sum += value.price * value.num;
            });
            console.log(sum);
            return "总价:" + sum;
          },
        },
        methods: {
          numChange: function (obj) {
            this.list.some((value, index, array) => {
              if (value.id == obj.id) {
                switch (obj.type) {
                  case "add":
                    value.num = value.num + 1 < 3 ? value.num + 1 : 3;
                    break;
                  case "sub":
                    value.num = value.num - 1 > 0 ? value.num - 1 : 0;
                    break;
                  case "input":
                    value.num = obj.value < 0 ? 0 : obj.value;
                    value.num = obj.value > 3 ? 3 : obj.value;
                    break;
                  default:
                    break;
                }
                return true;
              }
            });
          },
          handelDelete: function (id) {
            // console.log(id);
            this.list.some((value, index, array) => {
              if (value.id == id) {
                array.splice(index, 1);
                return true;
              }
            });
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>