Vue.js实现简单的图书管理系统

最新推荐文章于 2024-06-12 10:54:06 发布

失忆症患者_

最新推荐文章于 2024-06-12 10:54:06 发布

阅读量3.7k

点赞数 5

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_41929578/article/details/108900914

版权

1.案例分享

废话少说，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
		<style type="text/css">
			.table1{
				/*width: 400px;
				height: 800px;*/
				border-collapse: collapse;/* 将重叠的的边框变成一条 */
			}
			a{
				text-decoration: none;
			}
			.table1 .title{
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<label for="id">编号</label>
				<input type="text" v-model="id" id="id" v-bind:disabled="flag"/>
				<label for="name">名称</label>
				<input type="text" v-model="name" id="name" />
				<input type="button"  value="提交" @click="handle"/>
			</div>
			<table border="1" cellspacing="0" cellpadding="20" class="table1">
				<div class="title">
					<caption><strong>图书管理系统</strong></caption> 
				</div>
				
				<thead>
					<tr>
						<th>编号</th>
						<th>时间</th>
						<th>名称</th>
						<th>操作</th>
				 	</tr>
				</thead>
				<tbody>
					<tr :key="index" v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{date | format('ss')}}</td>
						<td>
							<a href="" @click.prevent="del(item.id)">删除</a>
							<span>|</span>
							<a href="" @click.prevent="toEdit(item.id)">修改</a>
						</td>
					</tr>
				</tbody>
				
			</table>
		</div>
		<script type="text/javascript">
			Vue.filter("format",function(value,arg){
						if(arg=="ss"){
							var ret = '';
							ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate();
							return ret;
						}
						return value;	
			});
			var vm = new Vue({
				el:"#app",
				data:{
					id:"",
					name:"",
					flag:false,
					date: new Date(),
					books:[
					{
						id:1,
						name: "三国演义",
						data: ""
					},
					{
						id:2,
						name: "水浒传",
						data: ""
					},
					{
						id:3,
						name: "西游记",
						data: ""
					}
					]
				},
				methods:{
					del:function(id){
						var index = this.books.findIndex(function(itemm){
							if(itemm.id ==id){
								return itemm;
							}
						})
//						console.log(index)
						//根据索引删除数组元素
						this.books.splice(index,1)
					},
					handle:function(){
						if(this.flag == true){
							//根据当前ID更新数组的信息,箭头函数的this指向父级
							this.books.some((item) => {
								if(item.id == this.id){
									item.name = this.name;
									//必须终止循环，否则没有结果
									return true;
								}
							});
							this.flag = false;
							this.id = '';
							this.name = "";
						}
						else{
							//添加图书
							var book = {};
							book.id = this.id;
							book.name = this.name;
							this.books.push(book);
							//清空表单
							this.id = '';
							this.name = "";
						}
					},
					toEdit:function(id){
//						console.log(id)
						//根据id查询出需要修改的数据
						var book = this.books.filter(function(item){
							if(item.id == id){
								return item;
							}
						});
//						console.log(book);
						//把获取的信息填充到表单,这个地方返回的是一个数组，所以要加上下标
						this.id = book[0].id;
						this.name = book[0].name;
						this.flag = true;
					}
				}
			})
		</script>
	</body>
</html>

实现效果
在这里插入图片描述

1.过滤器实现时间的记录：

Vue.filter(“过滤器名称”,function(参数列表){})
在过滤器“format”中，参数value代表传递过来的时间对象data，我们在调用“format”时，默认不写；
当我们想为过滤器添加参数时，在定义时需要给出，调用时直接添加你想传递的参数；
data.getFullYear()：获取当前时间的年份；
data.getMonth()：获取当前的月份，需要注意的是返回的月份从0开始，所以要+1；

<td>{{date | format('ss')}}</td>
date: new Date();
Vue.filter("format",function(value,arg){
						if(arg=="ss"){
							var ret = '';
							ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate();
							return ret;
						}
			});

2.删除操作

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
splice(index,"元素的个数) 方法可删除从 index 处开始的零个或多个元素;
del:function(id){}中的id可在HTML中传递过来，例如del(item.id)

del:function(id){
				var index = this.books.findIndex(function(itemm){
				//此处遍历数组来匹配对应的id
							if(itemm.id ==id){
								return itemm;
							}
						})
						//根据索引删除数组元素
						this.books.splice(index,1)
					}

3.修改操作

我们在对图书进行修改时，禁止修改图书的标号，如果不禁止，会造成操作混乱；

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）；
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

if(this.flag == true){
//根据当前ID更新数组的信息,箭头函数的this指向父级
			this.books.some((item) => {
				if(item.id == this.id){
				item.name = this.name;
				//必须终止循环，否则没有结果
				return true;
				}
			});
				this.flag = false;
				this.id = '';
				this.name = "";
			}

4.添加图书操作

push() 方法可向数组的末尾添加一个或多个元素，返回值是新的长度；
unshift() 方法可向数组的开头添加一个或多个元素；
pop() 方法用于删除并返回数组的最后一个元素；

{
			//添加图书
			var book = {};
			book.id = this.id;
			book.name = this.name;
			this.books.push(book);
			//清空表单
			this.id = '';
			this.name = "";
}

失忆症患者_

关注

5
点赞
踩
66

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue.js实现简单的图书管理系统

1.案例分享废话少说，直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style type="text/css"> .table1{ /*width: 400px; height: 800px;*
复制链接

扫一扫