利用计算属性、指令等知识开发购物车

最新推荐文章于 2024-04-03 09:02:17 发布

码龙3

最新推荐文章于 2024-04-03 09:02:17 发布

阅读量301

点赞数 1

分类专栏： vue 文章标签：购物车 vue

本文链接：https://blog.csdn.net/qq_39705793/article/details/82997525

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

经过一番学习vue的基础知识，利用计算属性、指令等知识开发一个简易的前端小项目，购物车

实现效果如下图所示：

不多说了直接展示代码

html文件

<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/shoppingCar.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	
	<div id="shoppingCar">
		<template>
			<table class="table">
				<thead>
					<tr>
						<th>序号</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr  v-for="(item,idnex) in list">
						<td>
							{{item.id}}
						</td>
						<td>
							{{item.name}}
						</td>
						<td>
							{{item.price}}
						</td>
						<td>
							<button @click="jian(idnex)">-</button>
							{{item.count}}
							<button @click="jia(idnex)">+</button>
						</td>
						<td>
							<button @click="del()">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<span>总价：￥</span>{{sum}}
		</template>
		<!-- 
		<template v-else>
			<span>购物车为空</span>
		</template> -->
	</div>

	<script src="js/shoppingCar.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="bootstrap/js/jquery.min.js"></script>
	
	
	
</body>
</html>

js 代码：


var vue = new Vue({
	
	el:'#shoppingCar',
	data:{
		status:1,
		list:[
		     {
		    	id:1,
		    	name:'iPhone7',
		    	price:6188,
		    	count:1
		     },
		     {
		    	id:2,
		    	name:'iPhone8',
		    	price:7188,
		    	count:1
		     },
		     {
		    	id:1,
		    	name:'iPhoneXS',
		    	price:8188,
		    	count:1
		     }
		     
		]
	},
	computed:{
		sum: function(){
			var total = 0;
			for(var i = 0 ; i<this.list.length;i++){
				var totalone = this.list[i].price * this.list[i].count;
				total = total+totalone;
			}
			return total.toString().replace(/\B(?=(\d{3})+$)/g,'');
		}
	},
	methods:{
		jian : function(index){
			if(this.list[index].count==0){
				return;
			}
			this.list[index].count-- ;
		},
		jia : function(index){
			this.list[index].count++ ;
		},
		del: function(index){
			this.list.splice(index,1);
		}
		
	}
	
})

css代码：

table{
	border: 1px soild #e9e9e9;
	border-collapse: collapse;
	border-spacing :0;
	empty-cells:show;
}

th, td{
	padding :8px 16px;
	border:1px soild #e9e9e9;
	text-align:left;
}
th{
	background: #f7f7f7;
	color:#5c6b77;
	font-weight:600;
	white-space:nowrap;
}

喜欢或者对你有帮助点个? - 。- vue

码龙3

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用计算属性、指令等知识开发购物车

经过一番学习vue的基础知识，利用计算属性、指令等知识开发一个简易的前端小项目，购物车实现效果如下图所示：不多说了直接展示代码 html文件&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;&lt;link rel="stylesheet" href="css/shoppingCar.css"/&am
复制链接

扫一扫