Vue篇——购物车案例

最新推荐文章于 2024-05-11 17:09:17 发布

J-April

最新推荐文章于 2024-05-11 17:09:17 发布

阅读量4.3k

点赞数 5

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/weixin_47016497/article/details/113743375

版权

前端开发专栏收录该内容

12 篇文章 3 订阅

订阅专栏

利用Vue实现购物车的简单运用

借助layui框架实现组件（如table）的快速搭建
通过Vue实现从后端获取数据到前端的展示
实现移除书籍功能（添加和修改书籍信息功能暂未实现）
实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化
…

程序效果截图

实现代码

首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述）
创建html、css和JavaScript目录

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书籍购物车</title>
		<!-- 导入layui的css文件 -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<!-- 自带样式 -->
		<style type="text/css">
			#app {
				width: 700px;
				height: 320px;
				margin: 100px auto;
			}

			.layui-table {
				width: 700px;
			}

			.layui-table th {
				text-align: center;
				line-height: normal;
			}

			.sbtn {
				width: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 style="text-align: center;font-weight: 100;color: #009688;">购物车</h2>
			<div v-if="books.length">
				<!-- 创建表单 -->
				<table class="layui-table">
					<colgroup>
						<col width="100">
						<col width="200">
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>
								<i class="layui-icon layui-icon-release" style="font-size: 30px; color: #1E9FFF;"></i>
							</th>
							<th style="text-align: center;">书籍名称</th>
							<th style="text-align: center;">出版时间</th>
							<th style="text-align: center;">价格</th>
							<th style="text-align: center;">购买数量</th>
							<th style="text-align: center;">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in books">
							<td style="text-align: center;">{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.data}}</td>
							<td>{{item.price|showPrice}}</td>
							<td>
								<button class="layui-btn layui-btn-primary layui-btn-xs sbtn" 
								@click="debtnClick(index)" 
								:disabled="item.count<=1"
								 :class="{ 'layui-btn-disabled':item.count<=1}">-</button>
								<label>{{item.count}}</label>
								<button class="layui-btn layui-btn-primary layui-btn-xs sbtn" 
								@click="inbtnClick(index)">+</button>
							</td>
							<td style="text-align: center;">
								<button class="layui-btn layui-btn-primary removebtn" 
								@click="removebtn(index)">移除</button>
							</td>

						</tr>
						<tr>
							<td>总价格</td>
							<td colspan="5" style="text-align: right;">{{totlePrice|showPrice}}</td>
						</tr>

					</tbody>
				</table>
			</div>
			<div v-else>购物车为空</div>
		</div>
	</body>
	<!-- 导入vue关键js代码 -->
	<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
	<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
	<!-- 导入layui关键js代码 -->
	<script src="../layui/layui.js"></script>
	<!-- 导入功能实现的js代码 -->
	<script src="main.js"></script>
</html>

JavaScript

new Vue({
	el: '#app',
	data: {
		// 书籍数据
		books: [{
				id: 1,
				name: '《算法导论》',
				data: '2006-09',
				price: '85.00',
				count: '1'
			},
			{
				id: 2,
				name: '《UNIX编程艺术》',
				data: '2006-02',
				price: '59.00',
				count: '1'
			},
			{
				id: 3,
				name: '《数据库》',
				data: '2008-10',
				price: '39.00',
				count: '1'
			},
			{
				id: 4,
				name: '《代码大全》',
				data: '2006-03',
				price: '128.00',
				count: '1'
			},
		]
	},
	// 过滤器
	filters: {
		showPrice(price) {
			return '￥' + parseFloat(price).toFixed(2)
		}
	},
	methods: {
		// 书籍数量减少
		debtnClick(index) {
			this.books[index].count--
		},
		// 书籍数量增加
		inbtnClick(index) {
			this.books[index].count++
		},
		// 移除书籍
		removebtn(index){
			this.books.splice(index,1)
		}
	},
	computed:{
		// 计算总价格
		totlePrice(){
			let totlePrice=0
			for(let i=0;i<this.books.length;i++){
				totlePrice+=this.books[i].price*this.books[i].count
			}
			return totlePrice
		}
	}

})

J-April

关注

5
点赞
踩
29

收藏

觉得还不错? 一键收藏
4
评论
Vue篇——购物车案例

利用Vue实现购物车的简单运用借助layui框架实现组件（如table）的快速搭建通过Vue实现从后端获取数据到前端的展示实现移除书籍功能（添加和修改书籍信息功能暂未实现）实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化…程序效果截图实现代码首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述）创建html、css和JavaScript目录html<!DOCTYPE html><html
复制链接

扫一扫