2021.9.5笔记 Vue练习-CSDN博客

本文链接：https://blog.csdn.net/q4451728/article/details/120115158

购物车案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="ShoppingCss.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.date}}</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="removeClick(index)">移除</button></td>
						</tr>
					</tbody>
				</table>
				<h2>总共的价格为:{{totalPrice | showPrice}}</h2>
			</div>
			<h2 v-else>购物车为空</h2>
		</div>
		<script src="../../js/vue.js"></script>
		<script src="main.js"></script>
	</body>
</html>

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

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

th {
	background-color: aqua;
	color: #FF0000;
	font-weight: 600;
}

const app = new Vue({
	el: '#app',
	data: {
		books: [
			{
				id: 1,
				name: '《算法导论》',
				date: '2021-9',
				price: 85.00,
				count: 1
			},
			{
				id: 2,
				name: '《喜羊羊与灰太狼》',
				date: '2021-9',
				price: 45.00,
				count: 1
			},
			{
				id: 3,
				name: '《计算机网络》',
				date: '2021-9',
				price: 56.00,
				count: 1
			},
			{
				id: 4,
				name: '《神雕侠侣》',
				date: '2021-9',
				price: 30.00,
				count: 1
			},
		]
	},
	methods: {
		increment(index) {
			this.books[index].count++
		},
		decrement(index) {
			this.books[index].count--
		},
		removeClick(index) {
			this.books.splice(index, 1)
		}
	},
	computed: {
		totalPrice() {
			let totalCount = 0
			for(let item of this.books) {
				totalCount += item.price * item.count
			}
			return totalCount
		}
	},
	filters: {
		showPrice(price) {
			return '¥' + price.toFixed(2)
		}
	}
})