利用vue的监听事件实现一个简单购物车

利用vue简单实现购物车的监听主要运用的vue的监听，有兴趣的可以看看实现过程<!DOCTYPE html><html><head><meta charset="utf-8"><title>利用vue实现对购物车的监听</title><script src="../vue.js">&lt...

angulaer

6310人浏览 · 2020-04-17 22:22:10

angulaer · 2020-04-17 22:22:10 发布

利用vue简单实现购物车的监听
主要运用的vue的监听，有兴趣的可以看看实现过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用vue实现对购物车的监听</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			table{
				border: 1px solid black;
				width: 100%;
				text-align: center;
			}
			th{
				height: 50px;
			}
			th, td{
				border-bottom: 1px solid #ddd;
				border-right: 1px solid #ddd;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<h1>订单系统</h1>
			<table>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>品牌</th>
					<th>价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<tr v-for="val in items">
					<td>{{val.id}}</td>
					<td>{{val.name}}</td>
					<td>{{val.pinpai}}</td>
					<td>{{val.price}}</td>
					<td>
						<!-- 如果count等于0执行v-bind
						绑定一个点击事件 -->
						<button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
						{{val.count}}
						<button @click="val.count+=1">+</button>
						
					</td>
					<td>
						<button v-on:click="val.count = 0">移除</button>
					</td>
					
				</tr>
			</table>
			<!-- 调用totalPrice -->
			你所需要支付总额为：${{totalPrice()}}
					
		</div>
		
		<script type="text/javascript" charset="UTF-8">
			var vm = new Vue({
				el:"#app",
				data:{
					items:[{
						id:1,
						name:'上衣',
						pinpai:'阿迪达斯',
						price:100,
						count:1
					},
					{
						id:2,
						name:'裤子',
						pinpai:'安踏',
						price:528,
						count:1
					},
					{
						id:3,
						name:'鞋子',
						pinpai:'耐克',
						price:999,
						count:1
					}]
				},
				
				methods:{
					totalPrice:function(){
						var totalPri = 0;
						//总价等于数量乘以数量
						for(var i=0;i<this.items.length;i++){
							totalPri += this.items[i].price*this.items[i].count;
						}
						return totalPri;
					}
				}
			});
			
		</script>
		
		
		
	</body>
</html>

实现效果：
在这里插入图片描述
你的点赞就是对我最大的支持！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^