图书管理小小案例

最新推荐文章于 2022-02-12 18:45:13 发布

别哭别梦别恋别醉别爱他

最新推荐文章于 2022-02-12 18:45:13 发布

阅读量355

点赞数

分类专栏：今日所学日报

本文链接：https://blog.csdn.net/lihua130427/article/details/102730611

版权

日报同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

今日所学

36 篇文章 0 订阅

订阅专栏

今天做了一个图书管理小小案例
在这里插入图片描述废话不多说代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书馆</title>
		<style type="text/css">
			* {
				margin: 0;
				height: 0;
			}

			li {
				list-style: none;
			}

			table {
				width: 600px;
				text-align: center;
				border-collapse: collapse;
				margin: 10px auto 0;
			}

			table caption {
				font-size: 50px;
				margin-bottom: 100px;
			}

			tr {
				height: 60px;
			}

			.btn {
				width: 50px;
				height: 30px;
			}

			ul {
				width: 400px;
				height: 350px;
				background-color: gainsboro;
				margin: 30px auto 0;
				padding-top: 30px;
				/* padding-left: 60px; */
				position: relative;
			}

			ul li {
				/* width: 80%; */
				height: 60px;
				/* text-align:center; */
			}

			ul li:nth-of-type(1) {
				font-size: 30px;
				text-align: center;
			}

			ul li input {
				height: 35px;
				width: 70%;
				margin-left: 20px;
			}

			ul button {
				width: 60px;
				height: 40px;
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<table border="1">
				<caption>图书管理系统</caption>
				<tr>
					<th>序号</th>
					<th>书名</th>
					<th>作者</th>
					<th>价格</th>
					<th>标签</th>
					<th>操作</th>
				</tr>
				<tr v-for="good in goods">
					<td>{{good.xuhao}}</td>
					<td>{{good.name}}</td>
					<td>{{good.zuozhe}}</td>
					<td>{{good.price}}</td>
					<td>{{good.biaoqian}}</td>
					<td><button @click="yichu(good)" class="btn">移除</button></td>


				</tr>
			</table>

			<ul>
				<li>新书上架</li>
				<li>书名:<input type="text" v-model="name" /></li>
				<li>作者:<input type="text" v-model="zuozhe" /></li>
				<li>价格:<input type="text" v-model="price" /></li>
				<li>标签:<input type="text" v-model="biaoqian" /></li>
				<button type="button" @click="jia">添加</button>
			</ul>

		</div>
	</body>
	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var demo = new Vue({
			el: "#demo",
			data: {
				goods: [{
						xuhao: 1,
						name: "《倚天屠龙记》",
						zuozhe: "金庸",
						price: 120,
						biaoqian: "金典"
					},
					{
						xuhao: 2,
						name: "《格林童话》",
						zuozhe: "格林兄弟",
						price: 130,
						biaoqian: "童话类"
					},
					{
						xuhao: 3,
						name: "《鲁冰逊漂流记》",
						zuozhe: "丹尼尔，笛福",
						price: 150,
						biaoqian: "小说"
					},
					{
						xuhao: 4,
						name: "《孙子兵法》",
						zuozhe: "孙武",
						price: 99,
						biaoqian: "历史"
					}
				],
				name: '',
				zuozhe: '',
				price: '',
				biaoqian: ''


			},
			methods: {
				yichu(good) {
					// alert("5556")

					if (confirm("您确定要删除吗？")) {
						var index = this.goods.indexOf(good);
						this.goods.splice(index, 1);
						this.goods.map(function(item, index, self) {
							item.xuhao = index + 1;
						})

					} else {
						alert('好的，您再看看')
					}
				},
				jia() {
					//alert(666)
					var kong = [];
					this.goods.push(kong);
					var index = this.goods.indexOf(kong);
					kong.xuhao = index + 1;

					kong.name = '《' + this.name + '》';
					kong.zuozhe = this.zuozhe;
					kong.price = this.price;
					kong.biaoqian = this.biaoqian;

					this.name = '';
					this.zuozhe = '';
					this.price = '';
					this.biaoqian = '';

				}
			}
		})
	</script>
</html>