Vue实现购物车小案例（免费）

最新推荐文章于 2024-04-27 09:42:37 发布

朱振玉小迷弟

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量468

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue html css

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115279566

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、源码

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>购物车小案例</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
	</head>
	<body>
			<div id="app">
				<div v-if="books.length">
					<table>
						<thead>
							<tr>
								<th></th>
								<th>书籍名称</th>
								<th>购买信息</th>
								<th>价格</th>
								<th>数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in books">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.data}}</td>
								<td>{{item.price | showPrice}}</td>
								<td>
									<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
									{{item.count}}
									<button @click="increment(index)">+</button>
								</td>
								<td>
									<button @click="removeHandle(index)">移除</button>
								</td>
							</tr>
						</tbody>
						<h2>总价格：{{totalPrice | showPrice}}</h2>
					</table>
				</div>
				<h2 v-else>购物车为空</h2>
				</div>
			<script src="./js/vue.js"></script>
			<script src="./js/main.js"></script>
			<script>
				
			</script>
	</body>
</html>

main.js:

const app = new Vue({
	el: '#app',
	data: {
		books:[
			{
				id: 1,
				name:'《算法导论》',
				data:'2006-9',
				price:85.00,
				count:1
			},{
				id: 2,
				name:'《第二本书》',
				data:'2006-3',
				price:35.00,
				count:1
			},{
				id: 3,
				name:'《法导论》',
				data:'2016-9',
				price:65.00,
				count:1
			},{
				id: 4,
				name:'《算论》',
				data:'2010-9',
				price:78.00,
				count:1
			},
		]
	},
	methods:{
		/* getFinalPrice(price){
			return '￥' + price.toFixed(2)
		} */
		increment(index){
			this.books[index].count++
		},
		decrement(index){
			this.books[index].count--
		},
		removeHandle(index){
			this.books.splice(index,1)
		}
	},
	filters:{
		showPrice(price){
			return '￥' + price.toFixed(2)
		}
	},
	computed:{
		totalPrice(){
			totalPrice = 0
			for(let i = 0;i < this.books.length;i++){
				totalPrice += this.books[i].price * this.books[i].count
			}
			return totalPrice
		}
	}
	
})

style.css（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;
}

二、简单叙述

style.css修改样式；
index.html为主要界面，在其中调用vue.js和main.js；
文件放置位置：
在这里插入图片描述

三、重要的事情

本文免费，没有套路，觉得有用的话希望点个赞关注一下！！！

朱振玉小迷弟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue实现购物车小案例（免费）

一、源码index.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>购物车小案例</title> <link rel="stylesheet" type="text/css" href="./css/style.css"/> </head> <body> <div id="app"&g
复制链接

扫一扫