VUE购物车小案例—vue指令的综合应用

最新推荐文章于 2022-07-19 15:49:43 发布

与世无争乔扬

最新推荐文章于 2022-07-19 15:49:43 发布

阅读量416

点赞数 1

分类专栏：前端文章标签：前端 Vue vue指令应用 html

本文链接：https://blog.csdn.net/weixin_45603043/article/details/102766621

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：

运用Vue基础指令知识实现小小购物车：

涉及到的指令有：v-for、v-model 、v-on、v-text

1.能够显示商品名，价格，以及当前商品在购物车的数量
2. 点击加+ 减- 可以更改购物车中产品数量，如果数量小于0 则移除
3.根据产品价格和数量统计出总金额。

话不多说，直接上代码：（无css样式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table tr,th,table tr,td{
				/* width: 200px; */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 style="margin-left: 300px;">MyShoopingCqrt</h2>
			<table border="6" cellspacing="6" cellpadding="6">
				<tr><th>品名Name</th><th>价格Price</th><th>重量Quality</th></tr>
				<tr v-for="(item,index) in goods">
					<td>{{ item.name }}</td>
					<td>（{{ item.price }}￥/kg）</td>
					<td>
						<span><button type="button" @click="reduce(item)">-</button></span>
						<span>{{ item.quality }}</span>
						<span><button type="button" @click="add(item)">+</button></span>
					</td>
				</tr>
				
				<tr>
					<td>Total</td>
					<td colspan="2">{{ total }}</td>
				</tr>
				
				<tr>
					<td>添加商品Addgoods:<input type="text" v-model="newGoodName" /></td>
					<td>商品价格Addprice:<input type="number" v-model="newGoodPrice" /></td>
					<td><button type="button" @click="AddnewFood">加入购物车Add to Cart</button></td>
				</tr>
				
			</table>
			
			
			
		</div>
		
		<script type="text/javascript">
			const vm= new Vue({
				el:"#app",
				data:{
					total:0,
					newGoodName:"",
					newGoodPrice:"",
					goods:[
						{
							name:"apple",
							price:8,
							quality:1
						},
						{
							name:"orange",
							price:7,
							quality:1
						},
						{
							name:"banada",
							price:6,
							quality:1
						},
						{
							name:"watermelon",
							price:5,
							quality:1
						},
					]
				},
				methods:{
					add(item){
						item.quality++;
						this.calcaute();
					},
					
					reduce(item){
						item.quality--;
						// 当商品总质量小于0 移除商品
						if(item.quality<0)
						{
							// 获得商品的索引
							let index= this.goods.indexOf(item);
							// 从数组移除商品
							this.goods.splice(index,1)
						}
						this.calcaute();
					},
					AddnewFood(){
						if(this.newGoodName==""||this.newGoodPrice==""){
							alert("添加商品信息不能为空哦~")
						}
						else{
							this.goods.push({
								name:this.newGoodName,
								price:this.newGoodPrice,
								quality:1
							})
							this.calcaute();
						}
					},
					
					calcaute(item){
						this.total=0;
						this.goods.forEach((item)=>{
							this.total+=item.price*item.quality;
						})
						this.newGoodName="",
						this.newGoodPrice="";
					},
					// 声明周期函数  当vm被创建会执行 created
					create(){
						this.calcaute();
					}
					
					
				}
			})
		</script>
		
		
		
	</body>
</html>