源码搜藏网

本文实例为大家分享了vue简单实现购物车结算的具体代码，供大家参考，具体内容如下

样式没有写

<template>
<div class="about container">
 <button class="btn btn-default">
  <router-link to="/customers">返回主页</router-link>
 </button>
 <button>获取数据</button>
 <ul>
  <li v-for="(item,index) in this.list" :key="index">
   <div>
    <input type="checkbox" v-model="item.checked" />
    <span>{{item.title}}</span>
    <button class="btn btn-default" @click="reduce(index)">-</button>
    <span>{{item.num}}</span>
    <button class="btn btn-default" @click="add(index)">+</button>
    <span>价格：{{item.price}}</span>
    <button @click="del(index,item._id)" class="btn btn-default">删除</button>
   </div>
  </li>
 </ul>
 <input type="checkbox" v-model="allcheck" @click="checkall" />
 <button>合计:{{totalMoney}}</button>
</div>
</template>

<script>
export default {
name: "about",
// 调用app.vue组件中的方法
inject: ["reload"],
data() {
 return {
  list: [],

  allcheck: false
 };
},

methods: {
 async getproduct() {
  const res = await this.$http.get("/goodslist");
  this.list = res.data;
  localStorage.setItem("shoppingcart", JSON.stringify(this.list));
  console.log(this.list);
 },
 add(i) {
  this.list[i].num++;
 },
 reduce(i) {
  if (this.list[i].num <= 1) {
   this.list[i].num = 0;
   return;
  }
  this.list[i].num--;
 },
 checkall() {
  //  console.log(this.allcheck);
  console.log(event.target.checked);
  this.list.forEach(item => {
   item.checked = event.target.checked;
   // console.log(item._id)
  });
 },
 async del(i, id) {
  const res = await this.$http.delete("/delfile/" + id);
  console.log(res);
  this.reload();
 }
},
computed: {
 totalMoney() {
  let allmoney = 0;
  let isAllCheck = true;
  for (let i in this.list) {
   if (this.list[i].checked) {
    allmoney += this.list[i].price * this.list[i].num;
   } else {
    isAllCheck = false;
   }
  }
  this.allcheck == isAllCheck;
  return allmoney;
 }
},
created() {
 this.getproduct();
}
};
</script>

<style>
li {
list-style: none;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。