vue简单实现购物车结算功能

本文实例为大家分享了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>

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