vue购物车实战

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