使用Vue实现简单的商品添加和购物车功能

最新推荐文章于 2024-07-06 18:15:35 发布

曹举的个人博客

最新推荐文章于 2024-07-06 18:15:35 发布

阅读量1w

点赞数 8

分类专栏： Java开发总结文章标签： vue vue案例

本文链接：https://blog.csdn.net/ju_362204801/article/details/100750655

版权

Java开发总结专栏收录该内容

133 篇文章 60 订阅

订阅专栏

最近翻看了一下vue的一些文档，发现vue真是一个好东西，作为一个后端开发人员，学习了一下vue

然后使用它做了一个小的案例后，发现无法自拔，对vue路转粉了~~~

话不多说，先看下最后的效果

上边的动态图就是利用vue实现简单的添加商品和加入购物车

输入商品名称和价格后点击添加商品，商品加入列表，然后点击商品后边的加入购物车，商品添加进下方的购物车

购物车里点击加或者减，可以修改购物车中商品的数量，同时总金额也会随着变化，当商品数量为1的时候再点击减号，弹出是否确认删除的提示框，点击确认，则删除购物车中的商品。并且随着选中框的变化，下方选中的商品数量随着变化，需付总金额也随之变化。

使用vue的三部曲：引包、留坑、实例化

知识点包括：vue基本常用指令的使用、组件化、父子组件之间的通讯、数据监听watch和computed等

贴一下全部的代码

随便新建一个后缀名为html的文件，把下面的代码复制粘贴进去就能运行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
</head>
<body>
	
	<!--留坑-->
	<div id="app">
		
		
	</div>

	<!--引包-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//把购物车模块抽取成单独的一个组件，组件化开发，实现解耦并且达到可复用的目的
		var Chat={
			//子组件接收父组件传递的数据
			props:['chatarr'],
			template:`
				<div>
					购物车
					<table border="1">
						<tr>
							<th>选中</th>
							<th>课程</th>
							<th>数量</th>
							<th>价格</th>
						</tr>
						<tr v-for='(chat,index) in chatarr'>
							<td>
								<input type="checkbox" v-model='chat.active' name="">
							</td>
							<td>{{chat.text}}</td>
							<td>
								<span @click='reducecount(index)'>-</span>
								{{chat.count}}
								<span @click='addcount(index)'>+</span>
							</td>

							<td>{{chat.count*chat.price}}</td>
						</tr>
						<tr>
							<td colspan='2'>选中的课程：{{activeCount}}/{{count}}</td>
							<td colspan='2'>需付金额：{{totalpirce}}</td>
						</tr>
					</table>
				</div>
			`,
			computed:{
				activeCount(){
					return this.chatarr.filter(v=>v.active).length
				},
				count(){
					return this.chatarr.length
				},
				totalpirce(){
					let total = 0;
					this.chatarr.forEach(v=>{
						if(v.active){
							total+=v.price*v.count
						}
					})
					return total
				}

			},
			methods:{
				//点击减号减少购物车商品数量
				reducecount(index){
					if(this.chatarr[index].count>1){
						this.chatarr[index].count--
					}else{
						if(window.confirm(`确认删除${this.chatarr[index].text}?`))
						this.chatarr.splice(index,1)
					}
					
				},
				//点击加号增加购物车商品数量
				addcount(index){
					this.chatarr[index].count++
				},	
			},
			watch:{

				chatarr:{
					handler(){
						window.localStorage.setItem('chat',JSON.stringify(this.chatarr))
					},
					deep:true
				}

			}
		}
		
		//实例化
		new Vue({
			el:'#app',
			template:`
				<div>
					<div>
						课程：<input type="text" name="" v-model='course'>
						价格：<input type="text" name="" v-model='price'>
						<button @click='addcourse'>添加商品</button>
					</div>
					<ul>
						<li  v-for='(list,index) in classlist'>
						课程名称：{{list.text}}---价格：{{list.price}}
						<button @click='addtochat(index)'>添加到购物车</button>
						</li>
					</ul>
				
					<!-- 父组件给子组件传递数据 -->
					<chat :chatarr='chatarr' ></chat>
				</div>
			`,
			components:{
				Chat
			},
			data:{
				classlist:[],
				course:'',
				price:'',

				//购物车数组
				chatarr:[],
			},
			methods:{
				//添加商品
				addcourse(){
					//插入数据到商品库
					this.classlist.push({text:this.course,price:this.price})
					//清空输入的商品信息
					this.course=''
					this.price=''
				},
				//添加至购物车
				addtochat(index){
					//alert(index)
					const goods=this.classlist[index]
					const result = this.chatarr.find(v=>v.text==goods.text)
					if(result){
						result.count+=1
					}else{
						this.chatarr.push({...goods,count:1,active:true})
					}
				},
				
			},
			created(){
				if(window.localStorage.getItem('chat')!=null){
					//利用本地存储做数据持久化  获取本地存储数据
					this.chatarr=JSON.parse(window.localStorage.getItem('chat')) 
				}
			}
		})

	</script>
</body>
</html>

上边的功能如果不用vue，用原生的JS或者JQ写的话，应该还是比较复杂的。

但是用vue的话，很少的代码量就可以实现这个功能，发现vue用起来真的是挺爽的。

刚开始接触vue，所以写点小案例来记录一下，以后方便随时翻看

铁子们，如果觉得文章对你有所帮助，可以点关注，点赞，也可以加wx：ju_luguoxingfu，也可以扫码，欢迎一起学习交流