Vue添加书籍

最新推荐文章于 2024-04-20 21:59:47 发布

裴嘉靖

最新推荐文章于 2024-04-20 21:59:47 发布

阅读量950

点赞数

分类专栏： Vue HTML JavaScript

本文链接：https://blog.csdn.net/peijiajing/article/details/102806425

版权

Vue 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理系统</title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			table {
				width: 500px;
				margin: 0 auto;
				margin-top: 20px;
				border-collapse: collapse;
				border: 1px solid #ccc;
			}

			tr {
				height: 30px;
				text-align: center;
				line-height: 30px;
			}

			th {
				background: lightgreen;
			}

			.article {
				width: 400px;
				height: 400px;
				background: #ccc;
				margin: 0 auto;
				margin-top: 20px;
			}

			.article h2 {
				padding-top: 20px;
				width: 100%;
				text-align: center;
			}

			.article p {
				margin-top: 20px;
				text-align: center;
			}

			.article input {
				width: 280px;
				font-size: 24px;
				height: 40px;
			}

			.article button {
				outline: none;
				width: 80px;
				height: 50px;
				float: right;
				margin-right: 30px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<table border="1">
				<caption>图书管理系统</caption>
				<tbody>
					<tr>
						<th>序号</th>
						<th>书名</th>
						<th>作者</th>
						<th>价格</th>
						<th>标签</th>
						<th>操作</th>
					</tr>
					<tr v-for=" (book,index) in books">
						<td>{{index+1}}</td>
						<td>{{book.name}}</td>
						<td>{{book.art}}</td>
						<td>{{book.price}}</td>
						<td>{{book.text}}</td>
						<td><button @click="deleteFn(book)">删除</button></td>
					</tr>
				</tbody>
			</table>
			<div class="article">
				<h2>添加新书</h2>
				<p>书名 : <input type="text" class="name"></p>
				<p>作者 : <input type="text" class="art"></p>
				<p>价格 : <input type="number" class="price"></p>
				<p>标签 : <input type="text" class="text"></p>
				<button @click="add">添加</button>
			</div>
		</div>
		<script type="text/javascript">
			var demo = new Vue({
				el: '.demo',
				data: {
					books: [{
							name: '《水浒传》',
							art: '施耐庵',
							price: 50 + '￥',
							text: '热销'
						},
						{
							name: '《西游记》',
							art: '吴承恩',
							price: 60 + '￥',
							text: '经典'
						}
					]
				},
				methods: {
					add() {
						var newBook = {
							name: '《' + $(".name").val() + "》",
							art: $(".art").val(),
							price: $(".price").val() + '￥',
							text: $(".text").val()
						}
						$(".article").find("input").val('');
						if (newBook.name == '' || newBook.art == '' || newBook.price == '' || newBook.text == '') {
							alert('请输入您要添加的书籍');
						} else {
							this.books.push(newBook);
						}
					},
					deleteFn(book) {
						var index = this.books.indexOf(book);
						if (confirm('确定删除该书籍？')) {
							this.books.splice(index, 1);
						}
					}
				}
			})
		</script>
	</body>
</html>