5.9图书管理案例

泡老师大迷弟

于 2022-11-30 14:00:10 发布

阅读量139

点赞数

分类专栏： Vue学习文章标签： css html 前端

本文链接：https://blog.csdn.net/PengK_aha/article/details/128114006

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

    常用特性应用场景
   1. 过滤器（格式化日期）
   2. 自定义指令（获取表单焦点）
   3. 计算属性（统计图书数量）
   4. 侦听器（验证图书存在性）
   5. 生命周期（图书数据处理）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.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;
			}
			.book div {
				padding: 10;
				line-height: 35px;
				border-bottom: 1px solid green;
				margin: auto;
				background-color: orange;
			}
			.book input {
				width: 150px;
			}
			.grid .total {
				height: 30px;
				line-height: 30px;
				background-color: #F3DCAB;
				border-top: 1px solid #C2D89A;
			}
		</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" v-focus/>
							<label for="name">
								名称：
							</label>
							<input type="text" id="name" v-model="name" />
							<button @click="handle" :disabled="submitFlag">提交</button>
						</div>
					</div>
				</div>
				<div class="total">
					<span>图书总数:</span>
					<span>{{total}}</span>
				</div>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="(item, index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
							<td>
								<a href="" @click.prevent="toEdit(item.id)">修改</a>
								<span> | </span>
								<a href="" @click.prevent="del(item.id)">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	 常用特性应用场景
	 1. 过滤器（格式化日期）
	 2. 自定义指令（获取表单焦点）
	 3. 计算属性（统计图书数量）
	 4. 侦听器（验证图书存在性）
	 5. 生命周期（图书数据处理）
	 */
	
	
	/*
	自定义指令，自动获取焦点
	 */
	Vue.directive('focus', {
		inserted: function(el){
			el.focus();
		}
	});
	
	
	/**
	过滤器（日期时间格式化）
	 */ 
	Vue.filter('format', function(value, arg){
		function dateFormat(date, format){
			if(typeof date === "string"){
				var mts = date.match(/(\/Date\((\d+)\)\/)/);
				if(mts && mts.length >= 3){
					date = parseInt(mts[2]);
				}
			}
			date = new Date(date);
			if(!date || date.toUTCString() == "Invalid Date"){
				return '';
			}
			var map = {
				"M" : date.getMonth() + 1,
				"d" : date.getDate(),
				"h" : date.getHours(),
				"m" : date.getMinutes(),
				"s" : date.getSeconds(),
				"q" : Math.floor((date.getMonth() + 3) / 3),
				"S" : date.getMilliseconds()
			};
			
			format = format.replace(/([yMdhmsqS])+/g, function(all, t){
				var v = map[t];
				if(v !== undefined){
					if(all.length > 1){
						v = '0' + v;
						v = v.substr(v.length -2);
					}
					return v;
				}else if(t === 'y'){
					return (date.getFullYear() + '').substr(4 - all.length);
				}
				return all;
			});
			return format;
		}
		return dateFormat(value, arg);
	
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 id: '',
				 name: '',
				 flag : false,
				 submitFlag: false,
				 books: '',
			},
			methods: {
				handle: function () {
					if(this.flag){
						//编辑操作 根据当前id更新数组对应的数据
						this.books.some((item) => {
							if(item.id == this.id){
								item.name = this.name;
								//完成更新操作后，终止循环
								return true;
							}						
						})
						this.flag = false;
					}else {
						//新增
						//添加图书
						var book = {};
						book.id = this.id;
						book.name = this.name;
						book.date = '';
						this.books.push(book);
					}
					//清空表单内容
					this.id = '';
					this.name = '';
				},
				toEdit: function(id){
					//修改的时候 禁用id修改
					this.flag = true;
					console.log(id);
					//根据id查询出要编辑的数据
					var book = this.books.filter(function(item){
						return item.id == id;
					})
					console.log(book);
					// 把获取到的信息回显
					this.id = book[0].id;
					this.name = book[0].name;
					
				},
				del: function(id){
					//删除
					//根据id从数组中查找索引
					var index = this.books.findIndex(function(item){
						return item.id == id;
					});
					//根据索引删除元素
					this.books.splice(index, 1);
				}
			},
			//计算属性，计算图书总数
			computed: {
				total: function(){
					// 计算图书的总数
					return this.books.length;
				}
			},
			//侦听器，验证图书是否存在
			watch: {
				name: function(val){
					//验证图书名称是否已经存在
					var flag = this.books.some(function(item){
						return item.name == val;										
					});
					if(flag) {
						//图书名称存在，提交按钮禁用
						this.submitFlag = true;
					}else{
						this.submitFlag = false;
					}
				},
				id: function(val){
					//验证图书名称是否已经存在
					var flag = this.books.some(function(item){
						return item.id == val;										
					});
					if(flag) {
						//图书名称存在，提交按钮禁用
						this.submitFlag = true;
					}else{
						this.submitFlag = false;
					}
				}
			},
			//该生命周期钩子函数被触发的时候，模板已经可以使用
			//一般此时用于获取后台数据，然后把数据填充到模板
			mounted: function(){
				var data = [{
					 id: 1,
					 name: '七龙珠',
					 date: 2525609975000,
				 },{
					 id: 2,
					 name: '灌篮高手',
					 date: 2525609975000,
				 },{
					 id: 3,
					 name: '名侦探柯南',
					 date: 2525609975000,
				 },{
					 id: 4,
					 name: '鬼灭之刃',
					 date: 2525609975000,
				 }];
				this.books = data;
			}
		});
		
	</script>
</html>