基于vue监听事件实现一个简单的购物车

迈不过友情╰ 2021-10-18 15:46 376阅读 0赞

代码如下。详情看vue菜鸟教程监听事件[https://www.runoob.com/vue2/vue-watch.html][https_www.runoob.com_vue2_vue-watch.html]  
示意图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>简单购物车</title>
    		<style>
    			#app{ 
    				width: 600px;
    				height: 300px;
    				margin: 100px auto;
    			}
    			table{ 
    				width: 100%;
    				height: 100%;
    				border: 1px solid skyblue;
    				background: rgba(255,200,100,0.3);
    			}
    			button{ 
    				background: #87CEEB;
    				border-radius: 5px;
    				height: 30px;
    				width: 45px;
    				outline: none;
    			}
    		</style>
    	</head>
    	<body>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<div id="app">
    			<table>
    				<tr>
    					<th>序号</th>
    					<th>商品名称</th>
    					<th>商品价格</th>
    					<th>购买数量</th>
    					<th>操作</th>
    				</tr>
    				<tr v-for="phone in HUAWEI">
    					<td>{ {  phone.id }}</td>
    					<td>{ {  phone.name }}</td>
    					<td>{ {  phone.price }}</td>
    					<td>
    						<button v-bind:disabled="phone.count === 0" v-on:click="phone.count-=1">-</button>
    						{ {  phone.count }}
    						<button v-on:click="phone.count+=1">+</button>
    					</td>
    					<td>
    						<button v-on:click="phone.count=0">移除</button>
    					</td>
    				</tr>
    			</table>
    			总价：￥{ { totalPrice()}}元
    		</div>
    		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    		<script>
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					HUAWEI: [{ 
    							id: 1,
    							name: '华为Mate 20',
    							price: 4099,
    							count: 0
    						},
    						{ 
    							id: 2,
    							name: '华为P30 pro',
    							price: 4999,
    							count: 0
    						},
    						{ 
    							id: 3,
    							name: '荣耀 20 pro',
    							price: 2699,
    							count: 0
    						}
    					]
    
    				},
    				methods: { 
    					totalPrice: function() { 
    						var totalP = 0;
    						for (var i = 0, len = this.HUAWEI.length; i < len; i++) { 
    							totalP += this.HUAWEI[i].price * this.HUAWEI[i].count;
    						}
    						return totalP;
    					}
    
    
    				}
    			})
    		</script>
    	</body>
    </html>

[https_www.runoob.com_vue2_vue-watch.html]: https://www.runoob.com/vue2/vue-watch.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]: /images/20211018/1f2a11c464254230a1de128bdb2052cf.png