vue购物车简单功能

功能有添加购物车、清空购物车、删除商品、点击加号商品数量++、点击减号商品数量--、商品数量和总价

html

 <div class="home">
    <h1>Vuex购物车</h1>
    <h2>商品信息</h2>
    <!-- 表格 -->
    <table border="1" width="600px" style="margin: auto" cellspacing="0">
      <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in productsData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.count }}</td>
          <td>
            <button @click="addshopcar(item)" v-if="item.add === 1">
              加入购物车
            </button>
            <b v-if="item.add === 2">
              <button class="jia" @click="item.count++">+</button>
              <button class="jian">-</button>
            </b>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>购物车信息</h2>
    <div class="box">
      <table border="0" width="600px" style="margin: auto" cellspacing="0">
        <thead>
          <tr>
            <th>id</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in addlist" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.count }}</td>
            <td>{{ item.price * item.count }}</td>
            <td>
              <button class="btn1" @click="aPlusSign(item.id)">+</button>
              <button class="btn2" @click="subtraction(item.id)">-</button>
              <button class="btn3" @click="del(index,item.id)">✖</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="wy">
      <div class="left">
        <span>总数是：<b>{{num}}</b></span>&emsp;
        <span
          >总价：<b>{{ sumPrice }}</b></span
        >
      </div>
      <div class="right">
        <button class="red" @click='empty'>清空购物车</button>
      </div>
    </div>
  </div>

js

export default {
  data() {
    return {
      productsData: [
        {
          id: 1,
          name: "鱼香肉丝",
          price: "12",
          count: 1,
          add: 1,
        },
        {
          id: 2,
          name: "宫保鸡丁",
          price: "16",
          count: 1,
          add: 1,
        },
        {
          id: 3,
          name: "土豆丝",
          price: "14",
          count: 1,
          add: 1,
        },
        {
          id: 4,
          name: "米饭",
          price: "32",
          count: 1,
          add: 1,
        },
        {
          id: 5,
          name: "猪脚饭",
          price: "36",
          count: 1,
          add: 1,
        },
      ],
      add: true,
      addlist: [],
      sum: 0,
    };
  },
  methods: {
    empty(){
      this.addlist = []
    },
    del(index,id){
     console.log(index);
     this.addlist.splice(index,1)
     this.productsData.forEach((item)=>{
        if(item.id == id){
            item.add = 1
        }
     })
    },
    subtraction(id) {
      var thie = this;
      this.addlist.forEach((item) => {
        if (item.id === id) {
          item.count--;
          // thie.total()
        }
      });
    },
    aPlusSign(id) {
      var thie = this;
      this.addlist.forEach((item) => {
        if (item.id === id) {
          item.count++;
          // thie.total()
        }
      });
    },
    addshopcar(item) {
      // console.log(item);
      var thie = this;
      this.productsData.forEach((res) => {
        if (res.id == item.id) {
          console.log(res);
          res.add = 2;
          thie.addlist.push(res);
          console.log(thie.addlist);
        }
      });
    },

    // 加加
    addNum() {},
  },
  watch: {
    total() {
      this.productsData.forEach((item) => {
        this.sum += item.price * item.count;
      });
      return this.sum;
    },
  },
  computed:{
    // 总价
    sumPrice(){
      var sum = 0
      this.addlist.forEach((item)=>{
         sum+=item.price * item.count
      })
      return sum
    },
    // 总数
    num(){
      var num1 = 0
      this.addlist.forEach((item)=>{
        num1+=item.count
      })
      return num1
    }
  }
};

css

button {
  cursor: pointer;
}
.red {
  background-color: #d34844;
}
.wy {
  width: 600px;
  height: 100px;
  /* background-color: #ccc; */
  margin: 240px auto;
  display: flex;
  justify-content: space-between;
  line-height: 100px;
}
.btn1 {
  width: 50px;
  height: 50px;
  background-color: #52b8dd;
  font-size: 20px;
}
.jia {
  width: 50px;
  height: 50px;
  background-color: #52b8dd;
  font-size: 20px;
}
.jian {
  width: 50px;
  height: 50px;
  background-color: #eca244;
  font-size: 20px;
  margin-left: 3px;
}
.btn2 {
  width: 50px;
  height: 50px;
  background-color: #eca244;
  margin: 0 10px;
  font-size: 20px;
}
.btn3 {
  width: 50px;
  height: 50px;
  background-color: #d24844;
}
th {
  border-bottom: 1px solid #000;
}
.box {
  width: 600px;
  height: 110px;
  /* border: 1px solid #000; */
  margin: auto;
}
.box1 {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #000;
}
button {
  width: 100px;
  background-color: #54b8da;
  color: #fff;
  border: 0px;
  height: 40px;
  border-radius: 5px;
}
th {
  height: 40px;
}
td {
  height: 65px;
}