VUE简单案例(图书管理)

VUE学习之路——vue简单案例

简单的VUE项目(图书管理)
实现了增删改功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理</title>
		<style type="text/css">
			table{
				border-collapse: collapse;
			}
			table,th,td,tr{
				border: black 1px solid;
			}
			td{
				text-align: center;
			}
			th{
				background-color: bisque;
			}
			td{
				background-color: beige;
			}
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="lib">
			<table>
				<tr>
					<td id="top" colspan="4" style="height: 40px; width: 900px;">
						<label for="id" v-focus>编号:</label>
						<!-- disabled是设置文本框不可写 -->
						<input type="text" id="id" v-model="id" v-bind:disabled="flag"/>
						&nbsp;
						<label for="name">名称:</label>
						<input type="text" id="name" v-model="name"/>
						&nbsp;
						<label for="date">日期:</label>
						<input type="text" id="date" v-model="date"/>
						&nbsp;
						<button type="button" v-on:click="handle" :disabled="submitFlag" id="changeBtn">添加</button>
					</td>
				</tr>
				<tr>
					<td colspan="4" style="height: 30px; width: 900px;">
						<span style="font-weight: bold;">图书总数:</span>
						<span v-cloak>{{total}}</span>
					</td>
				</tr>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>时间</th>
					<th>操作</th>
				</tr>
				<tr :key='item.id' v-for="item in list">
					<td v-cloak>{{item.id}}</td>
					<td v-cloak>{{item.name}}</td>
					<td v-cloak>{{item.time}}</td>
					<td><a href="javascrpt::" v-on:click="updateBtn(item)">修改</a>
					 | 
					<a href="javascript::" v-on:click="deleteBtn(item.id)">删除</a></td>
				</tr>
			</table>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// 自定义指令(获取焦点)
			Vue.directive('focus',{
				inserted:function(el){
					el.focus();
				}
			});
			
			const vm = new Vue({
				el:'#lib',
				data:{
					flag:false,
					submitFlag:false,
					id:'',
					name:'',
					list:[
						{id:1,name:'html从入门到放弃',time:'2020-01-01'},
						{id:2,name:'css从入门到放弃',time:'2020-01-02'},
						{id:3,name:'javascript从入门到放弃',time:'2020-01-03'},
						{id:4,name:'vue从入门到放弃',time:'2020-01-04'}
					]
				},
				methods:{
					handle:function(){
						//如果编号文本框不可写,则进入修改模式,否者添加新图书
						if(this.flag){
							document.getElementById('changeBtn').innerHTML = "添加";
							this.list.some((item) => {
								if(item.id == this.id){
									item.name = this.name
									item.time = this.date
									//终止循环
									return true
								}
							})
							this.flag = false
						}else{
							let book = {}
							book.id = this.id
							book.name = this.name
							book.time = this.date
							this.list.push(book)
						}
						//清空文本框
						this.id = ''
						this.name = ''
						this.date = ''
					},
					// 修改图书
					updateBtn:function(item){
						// 进入修改模式,更改按钮为提交按钮
						document.getElementById('changeBtn').innerHTML = "提交";
						this.flag = true
						this.id = item.id
						this.name = item.name
						this.date = item.time
					},
					// 删除图书
					deleteBtn:function(id){
						// 寻找删除图书在数组中的下标并返回
						var index = this.list.findIndex(function(item){
							return item.id == id
						})
						// 删除下标为index的图书
						this.list.splice(index,1)
					}
				},
				// 计算属性(统计图书数量)
				computed:{
					total:function(){
						return this.list.length
					}
				}
			})
		</script>
	</body>
</html>

你可能感兴趣的:(VUE简单案例(图书管理))