1.引入vue
html<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
2.设置高亮部分的样式
html<style> table tr{ text-align: center; } .skyblue{ background-color: skyblue; } </style>
3.设置body的基本样式
html<div id="app" > <table border="1px solid black" style="width:500px;" > <thead> <tr > <td>选中</td> <td>图片</td> <td>单价</td> <td>个数</td> <td>小计</td> <td>操作</td> </tr> </thead> <tbody v-if="list.length>0"> <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}"> <td><input type="checkbox" v-model="item.isCheck"></td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button :disabled="item.num<=1" @click="sub(item.id)">-</button> {{item.num}} <button @click="add(item.id)">+</button></td> <td>{{item.price*item.num}}</td> <td> <button @click="del(item.id)">del</button> </td> </tr> </tbody> <tbody v-else> <tr > <td colspan="6">空空如也</td> </tr> </tbody> <tfoot> <tr> <td colspan="6" > 全选<input type="checkbox" v-model="isAll"> 总价:¥ {{jiage}} <button @click="j()">结算{{zongshu}}</button> </td> </tr> </tfoot> </table> </div>
4.设置js的逻辑
javascript<script> const ddd =[{id:1,name:"苹果",price:30,num:3,isCheck:true}, {id:2,name:"火龙果",price:50,num:10,isCheck:true}, {id:3,name:"香蕉",price:20,num:300,isCheck:false}, {id:4,name:"西瓜",price:100,num:20,isCheck:true}, ] const app=new Vue({ el:'#app', data:{ list:JSON.parse(localStorage.getItem("list"))||ddd }, methods:{ del(a){ this.list = this.list.filter(item => item.id !== a ) }, add(a){ const l=this.list.find(item=>item.id ===a) // console.log(l) l.num++ }, sub(a){ const l=this.list.find(item=>item.id ==a) l.num-- }, j(){ var s= this.list.reduce((sum,item)=>item.isCheck?sum+item.num:sum,0) var s1= this.list.reduce((sum,item)=>item.isCheck?sum+item.num*item.price:sum,0) alert("您共购买"+s+"个商品,花了"+s1+"元") } }, computed:{ isAll:{ get(){ return this.list.every(a=>a.isCheck===true)}, set(a){ this.list.forEach(b=>b.isCheck=a) } }, jiage(){ return this.list.reduce((a,b)=>(b.isCheck?a+b.num*b.price:a),0) }, zongshu(){ return this.list.reduce((a,b)=>(b.isCheck?a+b.num:a),0) } }, watch:{ list:{ deep:true,//深度监视 handler(newValue){ localStorage.setItem("list",JSON.stringify(newValue)) } } , } }) </script>
完整代码如下
html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水果购物车</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> <style> table tr{ text-align: center; } .skyblue{ background-color: skyblue; } </style> </head> <body> <div id="app" > <table border="1px solid black" style="width:500px;" > <thead> <tr > <td>选中</td> <td>图片</td> <td>单价</td> <td>个数</td> <td>小计</td> <td>操作</td> </tr> </thead> <tbody v-if="list.length>0"> <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}"> <td><input type="checkbox" v-model="item.isCheck"></td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button :disabled="item.num<=1" @click="sub(item.id)">-</button> {{item.num}} <button @click="add(item.id)">+</button></td> <td>{{item.price*item.num}}</td> <td> <button @click="del(item.id)">del</button> </td> </tr> </tbody> <tbody v-else> <tr > <td colspan="6">空空如也</td> </tr> </tbody> <tfoot> <tr> <td colspan="6" > 全选<input type="checkbox" v-model="isAll"> 总价:¥ {{jiage}} <button @click="j()">结算{{zongshu}}</button> </td> </tr> </tfoot> </table> </div> <script> const ddd =[{id:1,name:"苹果",price:30,num:3,isCheck:true}, {id:2,name:"火龙果",price:50,num:10,isCheck:true}, {id:3,name:"香蕉",price:20,num:300,isCheck:false}, {id:4,name:"西瓜",price:100,num:20,isCheck:true}, ] const app=new Vue({ el:'#app', data:{ list:JSON.parse(localStorage.getItem("list"))||ddd }, methods:{ del(a){ this.list = this.list.filter(item => item.id !== a ) }, add(a){ const l=this.list.find(item=>item.id ===a) // console.log(l) l.num++ }, sub(a){ const l=this.list.find(item=>item.id ==a) l.num-- }, j(){ var s= this.list.reduce((sum,item)=>item.isCheck?sum+item.num:sum,0) var s1= this.list.reduce((sum,item)=>item.isCheck?sum+item.num*item.price:sum,0) alert("您共购买"+s+"个商品,花了"+s1+"元") } }, computed:{ isAll:{ get(){ return this.list.every(a=>a.isCheck===true)}, set(a){ this.list.forEach(b=>b.isCheck=a) } }, jiage(){ return this.list.reduce((a,b)=>(b.isCheck?a+b.num*b.price:a),0) }, zongshu(){ return this.list.reduce((a,b)=>(b.isCheck?a+b.num:a),0) } }, watch:{ list:{ deep:true,//深度监视 handler(newValue){ localStorage.setItem("list",JSON.stringify(newValue)) } } , } }) </script> </body> </html>
vue购物车实战
流殇꧂2024-03-02 14:52
相关推荐
蜚鸣10 小时前
Vue的快速入门吃饭最爱2 天前
⽹络请求Axios的概念和作用魂尾ac2 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)zhz52143 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升小胖墩有点瘦4 天前
【基于协同过滤的校园二手交易平台】小圣贤君4 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化知识分享小能手4 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)@AfeiyuO4 天前
分类别柱状图(Vue3)