实验二基于Vue.js的图书购物车

Suc_zhan

已于 2024-03-02 20:11:17 修改

阅读量1.3k

点赞数 26

分类专栏： Vue+Spring Boot前后端分离开发实战文章标签： vue.js 前端 javascript

于 2024-03-01 10:14:58 首次发布

本文链接：https://blog.csdn.net/m0_73502929/article/details/136387536

版权

Vue+Spring Boot前后端分离开发实战专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一、实验目的

目的：熟悉Vue的基本指令，进一步熟练应用CSS+HTML+JS。

任务：使用Vue+CSS+HTML+JS，设计图书购物车。

二、实验要求

1、设计如图1的图书购物车。

2、实验安排方式：上机编码。

3、实验结果展示，包括代码（可分栏展示）和效果图。

一、实验目的

目的：熟悉Vue的基本指令，进一步熟练应用CSS+HTML+JS。

任务：使用Vue+CSS+HTML+JS，设计图书购物车。

二、实验要求

1、设计如图1的图书购物车。

图1

1）点击移除按钮，则移除一行记录的显示；

2）点击“+”或者“-”按钮，则购买数量发生相应的变化，且总价也随之发生变化；

3）当页面所有记录移除完，则在页面上显示“购物车为空”。

4）当购买数量为“0”时，“-”按钮变成不可使用。

具体操作步骤：

1）设计一个main.js文件保存图1中4本书信息，编号，书籍名称，出版日期，价格，购买数量默认值为1。在main.js中已保存基本信息，需要在method中添加购买数量发生加1和减1以及移除（可使用数组的删除方法：.splice()）这三个操作方法。添加computed中的方法，实现总价格计算(可采用传统写法或者利用高阶函数reduce()实现)。

2）表格样式可设计一个.css文件，在主页面index.html中引入进来。

3）在主页面index.html中合适位置引入外部main.js文件，利用v-for指令实现表格内容的展示。

4）在“+”或者“-”按钮添加相应的监听指令，同时在“-”按钮中绑定属性：v-bind: disabled=“购买数量<=0”

5）在移除按钮中添加相应的监听指令。

6）打开浏览器，观察各个页面运行结果。

2、实验安排方式：上机编码。

3、实验结果展示，包括代码（可分栏展示）和效果图。

三、实验代码

图书购物车．html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书籍购物车</title>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
	<style type="text/css">
		table
		{
			width: 400px;
			height:120px;
			text-align: center;
			font-size: 12px;
			border-collapse: collapse;
		}
		table thead
		{
			height: 30px;
			background-color: #CCCCCC;
			opacity: 0.5;
		}
		table tbody
		{
			background:#D3D3D4;
		}
		
	</style>
	</head>
	<body>
		<div id="app">
			<div v-if="books.length>0">
				<table border="1" cellspacing="1" cellpadding="1">
					<thead>
						<tr>
							<th>编号</th>
							<th>书籍</th>
							<th>价格</th>
							<th>日期</th>
							<th>数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(value,index) in books">
							<td>{{value.id}}</td>
							<td>{{value.book}}</td>
							<td>{{value.price | singlePrice}}</td>   <!-- 过滤器写法 将value.price作为参数传进入到singlePrice函数中-->
							<td>{{value.date}}</td>
							<td>
							<button @click="increment(index)">+</button>
							{{value.count}}
							<button @click="decrement(index)" v-bind:disabled="value.count<=1">-</button>
							</td>
							<td>
								<button @click="del(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
		<h1>总计价格是：{{getTotalprice()}}</h1>
			</div>
			<h2 v-else>购物车为空！</h2>
			
		</div>
	</body>
	<script type="text/javascript">
		const app = new Vue({
			el: '#app',
			data: {
				books: [{
						id: 1,
						book: '《算法导论》',
						date:'2006-9',
						price: 85.00,
						count: 1,
					},
					{
						id: 2,
						book: '《UNIX编程艺术》',
						date:'2006-2',
						price: 59.00,
						count: 1
					},
					{
						id: 3,
						book: '《编程珠玑》',
						date:'2008-10',
						price: 39.00,
						count: 1
					},
					{
						id: 4,
						book: '《代码大全》',
						date:'2006-3',
						price: 128.00,
						count: 1
					}
				]
			},
			methods:
			{   
				
				increment(index)     //按钮加加操作
				{
					this.books[index].count++;
				},
				decrement(index)  //按钮减减操作
				{
				this.books[index].count--;
				},
				del(index)
				{
					this.books.splice(index,1);
				},
				
				getTotalprice()      //价格总计
				{  var sum = 0;
					for(let i = 0;i<this.books.length;i++)
					{
						sum += this.books[i].price*this.books[i].count;
					}
					return '￥'+ sum.toFixed(2);
				}
				
			},
			filters:
			{
				singlePrice(price)
				{
					return "￥" + price.toFixed(2);     //toFixed是保留小数后几位
				}
			}
		})
	</script>
</html>

Main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
  },
  computed: {
 
  }
})