图书馆里（二）

发布时间：2024年01月02日

<html>
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.grid{
    			margin: auto;
    			width: 500px;
    			text-align: center;
    		}
    		.grid table{
    			width: 100%;
    			border-collapse: collapse;
    		}
    		.grid th ,td{
    			padding: 10;
    			border:1px dashed orange;
    			height: 35px;
    			line-height: 35px;
    		}
    		.grid th{
    			background-color: orange;
    		}
    	</style>
	</head>
	<body>
		<div id = "app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>
							<label for="id">
								编号
							</label>
							<input type="text" id="id" v-model='id' :disabled='flag'>
							<label for="name">名称</label>
							<input type="text" id="name" v-model="name">
							<button @click='handle'>提交</button>
						</div>
					</div>
				</div>
				<table border="1">
					<thead style="background: red;">
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for='item in books'>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.datestr}}</td>
							<td>
								<a href="" @click.prevent='toEdit(item.id)'>修改</a>
								|<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data: {
					flag: false,
					fname:'',
					id:'',
					name:'',
					books: [
					{
						id:'1',
						name:'三国演义',
						datestr:'2023-12-31',
					},
					{
						id:'2',
						name:'水浒传',
						datestr:'2023-12-31',
					},
					{
						id:'3',
						name:'红楼梦',
						datestr:'2023-12-31',
					},
					{
						id:'4',
						name:'西游记',
						datestr:'2023-12-31',
					}
					]
				},
				methods:{
					handle: function(){
						if(this.flag) {
							//编辑功能
							this.books.some((item) => {
								if(item.id == this.id) {
									item.name = this.name;
									return true;
								}
							})
						} else {
							//新增功能
							var book = {};
							book.id = this.id;
							book.name = this.name;
							book.date = '';
							this.books.push(book);
							this.id='';
							this.name='';
						}
						this.id='';
						this.name='';
					},
					toEdit: function(id) {
						this.flag = true;
						console.log(id);
						var book = this.books.filter(function(item) {
							return item.id == id;
						});
						this.id = book[0].id;
						this.name = book[0].name;
					},
					deleteBook: function(id) {
						var index = this.books.findIndex(function (item) {
							return item.id == id;
						});
						this.books.splice(index,1);

					}
				}
			});
		</script>
	</body>
</html>

文章来源:https://blog.csdn.net/xi_weina/article/details/135346796
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章