蓝桥杯web：第十题【功能实现】购物车

Rainbow一定行

已于 2022-03-13 20:39:44 修改

阅读量1k

点赞数 1

分类专栏：蓝桥杯web模拟题2 文章标签：蓝桥杯前端职场和发展

于 2022-02-27 20:21:35 首次发布

本文链接：https://blog.csdn.net/weixin_51167834/article/details/123169625

版权

蓝桥杯web模拟题2 专栏收录该内容

10 篇文章 8 订阅

订阅专栏

在代码中需要修改的部分有相关提示，请仔细阅读，然后完善 index.html 中的 js 部分代码，请求数据，并让数据正确显示到页面上，完成后效果如下：

json数据

[
	{
		"id": 6,
		"name": "橘子",
		"price": 3.9,
		"num": 1,
		"img": "./images/img1.jpg"
	},
	{
		"id": 7,
		"name": "车厘子",
		"price": 138.8,
		"num": 2,
		"img": "./images/img2.jpg"
	},
	{
		"id": 7,
		"name": "草莓",
		"price": 28.5,
		"num": 3,
		"img": "./images/img3.jpg"
	},
	{
		"id": 7,
		"name": "菠萝",
		"price": 9.8,
		"num": 4,
		"img": "./images/img4.jpg"
	}
]

完善index.html代码，将数据渲染到页面上

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="container" id="app" >
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div  v-for="(item,index) in carlist">
			<el-card class="box-card">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						{{item.name}}<!-- 商品名称 -->
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							{{item.num}}
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				// 在这里使用axios 发送请求
				var that=this;
				axios.get("./carList.json").then(function(response){
					console.log(response.data);
					that.carlist=response.data
				})
			},
		})


	</script>
</body>




</html>

考察点：axios请求数据，vue的基本属性

Rainbow一定行

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
蓝桥杯web：第十题【功能实现】购物车

在代码中需要修改的部分有相关提示，请仔细阅读，然后完善 index.html 中的 js 部分代码，请求数据，并让数据正确显示到页面上，完成后效果如下：json数据[ { "id": 6, "name": "橘子", "price": 3.9, "num": 1, "img": "./images/img1.jpg" }, { "id": 7, "name": "车厘子", "price": 138.8, "num": 2, "img": "./i
复制链接

扫一扫