zoukankan      html  css  js  c++  java
  • vue购物车

    html+vue.js:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>购物车示例</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    		
    </head>
    <body>
    	<div id="app" >
    		<template v-if="list.length">
    			<table>
    				<thead>
    					<tr>
    						<th></th>
    						<th>商品名称</th>
    						<th>商品单价</th>
    						<th>商品数量</th>
    						<th>操作</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr v-for="(item, index) in list">
    						<td>{{index+1}}</td>
    						<td>{{item.name}}</td>
    						<td>{{item.price}}</td>
    						<td>
    							<button @click="handleReduce(index)" :disabled="item.count===1">-	</button>{{item.count}}
    							<button @click="handleAdd(index)">+</button>
    						</td>
    						<td><button @click="handleRemove(index)">移除</button>
    						</td>
    					</tr>
    					
    				</tbody>
    			</table>
    			<div>总价:{{totalPrice}}</div>
    		</template>
    		<div v-else>购物车为空</div>
    
    	</div>
    	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    	<script >
    		var app = new Vue({
    			el: "#app",
    			data:{
    				list:[
    					{
    						id:1,
    						name:'iphone7',
    						price:6188,
    						count:1
    					},
    					{
    						id:2,
    						name:'iPad Pro',
    						price:5888,
    						count:1
    					},
    					{
    						id:3,
    						name:'mac',
    						price:21488,
    						count:1
    					}
    				]
    
    		},
    		methods:{
    			handleReduce:function(index){
    				if(this.list[index].count===1) return;
    				this.list[index].count--;
    			},
    			handleAdd:function(index){
    				this.list[index].count++;
    			},
    			handleRemove:function(index){
    				this.list.splice(index,1);
    			}
    
    		},
    		computed:{
    			totalPrice:function(){
    				var total = 0;
    				for(var i=0;i<this.list.length;i++){
    					var item = this.list[i];
    					total+=item.price*item.count;
    				}
    					return total.toString().replace(/B(?=(d{3})+$)/g,',');
    					
    			}
    
    		}
    	});
    	</script>
    	
    </body>
    </html>
    

     css:

    [v-cloak]{
    	display: none;
    }
    table{
    	border:1px solid #e9e9e9;
    	border-collapse:collapse;
    	border-spacing:0;
    	empty-cells: show;
    }
    th,td{
    	padding: 8px 16px;
    	border: 1px solid #e9e9e9;
    	text-align: center;
    
    }
    th{
    	background: #f7f7f7;
    	color:#5c6b77;
    	font-weight: 600;
    	white-space: nowrap;
    }
    

     最后结果:

  • 相关阅读:
    Codeforces 741D 【Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths】
    Codeforces 235C 【Cyclical Quest】
    UOJ #62.【UR #5】怎样跑得更快
    luoguP3648 [APIO2014]序列分割
    luoguP4782 [模板]2-SAT问题
    原博客已废弃
    个数可变的参数收藏
    新的一年开始。
    文件上传下载总结
    模板模式学习(转)
  • 原文地址:https://www.cnblogs.com/xiaoqianliu/p/9129961.html
Copyright © 2011-2022 走看看