Vue 基础第五篇书籍购物车案例

最新推荐文章于 2024-03-01 10:14:58 发布

_语义错误

最新推荐文章于 2024-03-01 10:14:58 发布

阅读量1.2k

点赞数 2

分类专栏： VUE 文章标签： javascript 开发语言前端 vue vue.js

本文链接：https://blog.csdn.net/m0_66451927/article/details/125748469

版权

本文介绍如何使用 Vue.js 创建一个图书购物车功能，包括添加商品、修改商品数量、移除商品、计算总价及判断购物车是否为空。通过实例详细讲解了 Vue 的基本操作和使用过滤器、事件绑定等特性。

摘要由CSDN通过智能技术生成

功能：写一个图书购物的表格，可以修改商品数量，移除商品，计算总价，当全部商品移除时显示购物车为空。如下图

第一步：先建立 html，css 和 js，分别取名 index.html ,style.css,main.js

先写 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item) in books">
						<td>{
  {item.id}}</td>
						<td>{
  {item.name}}</td>
						<td>{
  {item.date}}</td>
						<td>{
  {item.price}}</td>
						<td>
							{
  {item.count}}
						</td>
						<td><button>移除</button></td>
					</tr>
				</tbody>
			</table>
			<h2>总价格：{
  {}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script src="main.js"></script>
	</body>
</html>

style.css

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

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