vue购物车的动态功能实现

最新推荐文章于 2024-08-07 16:12:37 发布

J_kong

最新推荐文章于 2024-08-07 16:12:37 发布

阅读量464

点赞数 2

分类专栏： JAVA 文章标签： java

本文链接：https://blog.csdn.net/qq_43751275/article/details/107717481

版权

JAVA 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基于vue,购物车的实现

1.css代码

table{
	border:1px solid #e9e9e9;
	border-collapse: collapse;
    border-spacing: 0;
}

th,td{
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}

th{
	background-color: #f7f7f7;
	color:#5c6b77;
	font-weight: 600;
}
a{   
    overflow: hidden;
    border: 2px solid #fff;
    display: inline-block;

}
a:hover img{

-webkit-transform:scale(1.3);-o-transform:scale(1.3);

}

2.js代码

		const tab = new Vue({
			el: "#main",
			data: {
				title: ['序号', '图书名称', '日期', '价格', '数量', '封面', '操作'],
				boolist: [{
						id: 1,
						name: 'Vue.js实战',
						data: '2015-11-19',
						price: 35.00,
						count: 1
					},
					{
						id: 2,
						name: 'Vue.js实战',
						data: '2014-03-21',
						price: 45.00,
						count: 1
					},
					{
						id: 3,
						name: 'Vue.js实战',
						data: '2012-05-03',
						price: 85.00,
						count: 1
					},
					{
						id: 4,
						name: 'Vue.js实战',
						data: '2016-01-01',
						price: 73.00,
						count: 1
					},
					{
						id: 5,
						name: 'Vue.js实战',
						data: '2017-08-15',
						price: 15.00,
						count: 1
					}
				]
			},
			methods: {

				addnum: function(id) {
					this.boolist[id].count++;
				},
				cutDown: function(id) {
					if(this.boolist[id].count > 0) {
						this.boolist[id].count--;
					} else {
						alert("没有货了")
					}
				},
				aa: function(index) {
					this.boolist.splice(index, 1);
				}
			},
			//计数的方法只能放在计数computed属性里
			computed: {
				totalPrice: function() {
					let a = 0;
					for(let i = 0; i < this.boolist.length; i++) {
						a += this.boolist[i].price * this.boolist[i].count;
					}
					return a;
				}
			}
		});

3.body代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车demo</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<!--引入css代码 -->
		<link rel="stylesheet" href="../css/car.css" />
	</head>

	<body>
		<!--购物车：
 				1、展示所有图书信息
 				2、价格：保留两位小数、前面需要：￥前缀
  				3、数量的改变，如未1，不能进行减少操作
  				4、如移除了所有的图书信息，则显示购物车为空
  				5、在原有的基础上，添加图片的展示
  				6、鼠标悬浮在图片上，图片放大显示 -->
		<div id="main">
			
			<div v-if="boolist.length >0">
				<table border="1">
					<tr>
						<th v-for="title1 in title">{{title1}}</th>
					</tr>
					<tr v-for="(bo,b) in boolist">
						<td>{{b+1}}</td>
						<td>{{bo.name}}</td>
						<td>{{bo.data}}</td>
						<td>{{bo.price}}</td>
						<td><button @click="addnum(b)">+</button>{{bo.count}}<button @click="cutDown(b)">-</button></td>
						<td><a href="https:www.baidu.com"><img src="../img/图书.png" /></a></td>
						<td><button v-on:click="aa(b)">移除</button></td>
					</tr>
				</table>
				<h1>商品总价格为：{{totalPrice}}</h1>
			</div>
			
			<div v-else><h1>购物车为空</h1></div>
		</div>
	</body>
	<!--引入js代码 -->
	<script type="text/javascript" src="../js/car.js" ></script>
</html>