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>
相关推荐
蜚鸣10 小时前
Vue的快速入门
vue
吃饭最爱2 天前
⽹络请求Axios的概念和作用
vue
魂尾ac2 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52143 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦4 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君4 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手4 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts