Vue.js_26_小案例

最新推荐文章于 2024-04-30 08:37:00 发布

魏宇轩

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量285

点赞数

分类专栏： Vue.js（更新完）文章标签： vue

本文链接：https://blog.csdn.net/qq_36260974/article/details/105585179

版权

Vue.js（更新完）专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本系列博客汇总在这里：Vue.js 汇总

小案例

一、需求说明
二、代码实现
三、实现效果

源码工程文件为：

一、需求说明

购物车。
在这里插入图片描述

二、代码实现

1、style.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;
}

2、demo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="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.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="removeHandle(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>

3、main.js

const app = new Vue({
	el: '#app',
	data: 
	{
		books: 
		[
			{
				id: 1,
				name: '《算法导论》',
				date: '2020-9',
				price: 815.00,
				count: 1
			},
			{
				id: 2,
				name: '《编程之美》',
				date: '2020-1',
				price: 519.00,
				count: 1
			},
			{
				id: 3,
				name: '《编程珠玑》',
				date: '2020-4',
				price: 319.00,
				count: 1
			},
			{
				id: 4,
				name: '《代码大全》',
				date: '2020-3',
				price: 118.00,
				count: 1
			},
		]
	},
	methods: 
	{
		increment(index) 
		{
			this.books[index].count++
		},
		decrement(index) 
		{
			this.books[index].count--
		},
		removeHandle(index) 
		{
			this.books.splice(index, 1)
		}
	},
	computed: 
	{
		totalPrice() 
		{
			let totalPrice = 0
			for (let i = 0; i < this.books.length; i++) 
			{
				totalPrice += this.books[i].price * this.books[i].count
			}
			return totalPrice
		}
	},
	filters: 
	{
		showPrice(price) 
		{
			return '¥' + price.toFixed(2)
		}
	}
})