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

作者:Amnesia? 时间:2024-05-28 15:54:57 

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

来源:https://blog.csdn.net/qq_44242030/article/details/104939702

标签:vue,购物车,结算
0
投稿

猜你喜欢

  • Golang极简入门教程(二):方法和接口

    2024-04-25 15:16:48
  • SQL Server 2000的视图中必须小心使用*符号

    2008-12-05 15:38:00
  • win10安装Sql Server 2014图文教程

    2024-01-16 16:47:34
  • Python捕捉和模拟鼠标事件的方法

    2022-02-14 11:17:24
  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    2024-04-16 09:23:29
  • 使用python绘制常用的图表

    2022-02-16 19:47:33
  • Python使用三种方法实现PCA算法

    2022-06-26 13:32:49
  • python学习VSCode使用技巧带你进入高效开发模式

    2021-01-02 04:38:58
  • 基于Python函数的作用域规则和闭包(详解)

    2023-09-03 09:00:28
  • PHPStudy hosts文件可能不存在或被阻止打开及同步hosts失败问题

    2023-06-08 10:29:10
  • Pandas对数值进行分箱操作的4种方法总结

    2023-08-09 02:52:04
  • Python实现解析参数的三种方法详解

    2023-09-13 21:46:25
  • 陌生网页交互行为分析(1)——奇怪的关闭按钮

    2009-01-08 12:22:00
  • mysql查询每小时数据和上小时数据的差值实现思路详解

    2024-01-20 08:31:31
  • MSSQL MySQL 数据库分页(存储过程)

    2024-01-29 13:28:13
  • 返回SQL执行时间的存储过程

    2024-01-16 15:22:06
  • python状态机transitions库详解

    2021-07-14 15:52:16
  • Go单体服务开发最佳实践总结

    2024-04-26 17:35:48
  • Python迭代和迭代器详解

    2023-11-20 08:52:28
  • MySQL Community Server 8.0.29安装配置方法图文教程

    2024-01-22 12:02:55
  • asp之家 网络编程 m.aspxhome.com