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
相关推荐
百锦再15 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖一笑code20 小时前
vue/微信小程序/h5 实现react的boundaryeric*168820 小时前
尚硅谷张天禹老师课程配套笔记喜欢敲代码的程序员1 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)海的诗篇_1 天前
前端开发面试题总结-原生小程序部分sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!伍哥的传说12 天前
react gsap动画库使用详解之text文本动画伍哥的传说12 天前
react gsap动画库使用详解之scroll滑动动画