利用Vue制作一个商品管理页面（第一部分）

最新推荐文章于 2024-04-25 22:00:38 发布

BlankTheMemory

最新推荐文章于 2024-04-25 22:00:38 发布

阅读量1.4k

点赞数 2

分类专栏： Vue学习历程文章标签： vue.js 前端

本文链接：https://blog.csdn.net/BlankTheMemory/article/details/107306420

版权

Vue学习历程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写在前面：入职一周的java菜鸟工程师，老大说接下来的活用到了Vue，所以就尝试着做一个小demo练练手，后端学前端框架，我可太难了~

今天先完成了一点简单的功能，包括管理页面的样式和body里面的内容，把添加按钮和重置按钮的功能完成。

在这里插入图片描述

附上学习代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () =>{
				new Vue({
					el:'.container',
					data:{
						imgUrl:'../res/images/',
						imgName:'logo.jpg',
						goods:{
							id:'',
							name:'',
							price:'',
							stock:'',
							type:''
						},
						goodsType:['日用百货','文具图书','服装'],
						goodsArray:[
							{id:'001',name:'蚊香',price:4.5,stock:300,type:'日用百货'},
							{id:'002',name:'演员的自我修养',price:47.9,stock:180,type:'文具图书'},
							{id:'003',name:'沙滩裤',price:59,stock:100,type:'服装'},
						]
					},
					methods:{
						addGoods(){
							this.goodsArray.push(this.goods);
							this.goods = {};	//输入之后清空添加过的商品信息
						}
					}
				});
			}
		</script>
		<style type="text/css">
			/*对大容器进行样式设置*/
			.container{
				margin: 0 auto;
				text-align: center;
				width: 1000px;
				border: 5px solid gray;
			}
			
			.myColor{
				color.rgb(55,75,95);
				text-align: center;
			}
			.myBackgroundColor{
				background:rgb(65,180,130);
			}
			.myFontSize{
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		<!--容器内放三部分-->
		<div class="container">
			<!--包括标题、logo-->
			<div class="header">
				<!--src路径是url+name-->
				<img :src="imgUrl+imgName" class="logo" height="80px" />
				<h1 class="title">商品管理v1.0</h1>
			</div>
			<!--输入部分，也包含三个部分,商品的全属性，操作按钮-->
			<div class="form-warp">添加商品</div>
				<div class="title"></div>
				<div class="content">
					商品编号：<input type="text" placeholder="这里填写商品的编号" v-model="goods.id" /><br />
					商品名称：<input type="text" placeholder="这里填写商品的名称" v-model="goods.name" /><br />
					商品价格：<input type="text" placeholder="这里填写商品的价格" v-model="goods.price" /><br />
					商品库存：<input type="text" placeholder="这里填写商品的库存" v-model="goods.stock" /><br />
					商品种类：<select v-model="goods.type">
							 	<option value="">--选择商品类型--</option>
							 	<option v-for="type in goodsType">{{type}}</option>
							 </select>
				</div>
				<div class="form-btn">
					<button @click="addGoods">确认添加</button>
					<button @click="goods = {}">重置</button>
				</div>
			<!--显示部分-->
			<div class="table-warp">
				<div class="title">商品列表</div>
				<div class="content">
					<table border="1" align="center" >
						<tr>
							<th>序号</th>
							<th>编号</th>
							<th>名称</th>
							<th>价格</th>
							<th>库存</th>
							<th>种类</th>
						</tr>
						<tr v-for="(item,index) in goodsArray" :key="item.id">
							<td>{{index}}</td>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.price}}</td>
							<td>{{item.stock}}</td>
							<td>{{item.type}}</td>
						</tr>
					</table>
				</div>
				<div class="clear-btn"></div>
			</div>
			
		</div>
	</body>
</html>

BlankTheMemory

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用Vue制作一个商品管理页面（第一部分）

写在前面：入职一周的java菜鸟工程师，老大说接下来的活用到了Vue，所以就尝试着做一个小demo练练手，后端学前端框架，我可太难了~今天先完成了一点简单的功能，包括管理页面的样式和body里面的内容，把添加按钮和重置按钮的功能完成。附上学习代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>商品列表</title> <script ty
复制链接

扫一扫