1.引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>2.设置高亮部分的样式
<style> table tr{text-align: center;}.skyblue{background-color: skyblue;}</style>3.设置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>4.设置js的逻辑
<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>
完整代码如下
<!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>
