Javascript

使用vue实现用户管理 添加及删除功能

本文主要是介绍使用vue实现用户管理 添加及删除功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简单的管理系统-增删改查

添加及删除功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<script src="../js/vue-2.4.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
			  <div class="panel-heading">
			    <h3 class="panel-title">用户管理</h3>
			  </div>
			  <div class="panel-body">
			   <form class="form-inline">
				  <div class="form-group">
				    <label for="exampleInputName2">Id:</label>
				    <input type="text" class="form-control" id="exampleInputName2" v-model="id">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail2">Name:</label>
				    <input type="text" class="form-control" id="exampleInputEmail2" v-model="name">
				  </div>
				  <button type="button" class="btn btn-primary" @click="add()">添加</button>
				  <div class="form-group">
				    <label for="exampleInputName3">搜索名称关键字：</label>
				    <input type="text" class="form-control" id="exampleInputName3" >
				  </div>
				</form>
			  </div>
			</div>
			<table class="table table-bordered table-striped table-hover">
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>CTime</th>
					<th>Operation</th>
				</tr>
				<tr v-for="item in userList">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.ctime}}</td>
					<td><a href="#" class="btn btn-primary" @click.prevent="del(item.id)">删除</a></td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data: {
					userList:[
						{id:1,name:"刘备",ctime: new Date()},
						{id:2,name:"关羽",ctime: new Date()},
						{id:3,name:"张飞",ctime: new Date()},
					],
					id:'',
					name:''
				},
				methods: {
					add() {
						let user = {id:this.id,name:this.name,ctime: new Date()};
						this.userList.push(user);
						this.id = this.name = '';
					},
					del(userId) {
						
						let index = this.userList.findIndex(item => item.id==userId);
						this.userList.splice(index, 1);
					}
				}
			});
		</script>
	</body>
</html>

添加根据名字搜索功能

<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<script src="../js/vue-2.4.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
			  <div class="panel-heading">
			    <h3 class="panel-title">用户管理</h3>
			  </div>
			  <div class="panel-body">
			   <form class="form-inline">
				  <div class="form-group">
				    <label for="exampleInputName2">Id:</label>
				    <input type="text" class="form-control" id="exampleInputName2" v-model="id">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail2">Name:</label>
				    <input type="text" class="form-control" 
				    	id="exampleInputEmail2" v-model="name" @keydown.enter="add()">
				  </div>
				  <button type="button" class="btn btn-primary" @click="add()">添加</button>
				  <div class="form-group">
				    <label for="exampleInputName3">搜索名称关键字：</label>
				    <input type="text" class="form-control"
				    	 id="exampleInputName3" v-model="keyWord" v-focus>
				  </div>
				</form>
			  </div>
			</div>
			<table class="table table-bordered table-striped table-hover">
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>CTime</th>
					<th>Operation</th>
				</tr>
				<tr v-for="item in search(keyWord)">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.ctime | formatDate('yyyy-mm-dd hh:mm:ss')}}</td>
					<td><a href="#" class="btn btn-primary" @click.prevent="del(item.id)">删除</a></td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript"> 
			//自定义键盘码
			//Vue.config.keyCodes.f2 = 113
			
			//全局指令
			Vue.directive("focus",{
				inserted: function(el) {
					el.focus();
				}
			})
			
			Vue.filter("formatDate",function(data, pattern) {
				let year = data.getFullYear();
				let month = (data.getMonth() + 1).toString().padStart(2,'0');
				let day = data.getDate().toString().padStart(2,'0');
				if(pattern==null || pattern==''){
					return `${year}年${month}月${day}日`
				}else {
					let h = data.getHours().toString().padStart(2,'0');
					let m = data.getMinutes().toString().padStart(2,'0');
					let s = data.getSeconds().toString().padStart(2,'0');
					
					return `${year}年${month}月${day}日  ${h}:${m}:${s}`
				}
				
			})
			
			let vm = new Vue({
				el: "#app",
				data: {
					userList:[
						{id:1,name:"刘备",ctime: new Date()},
						{id:2,name:"关羽",ctime: new Date()},
						{id:3,name:"张飞",ctime: new Date()},
					],
					id:'',
					name:'',
					keyWord:''
				},
				methods: {
					add() {
						let user = {id:this.id,name:this.name,ctime: new Date()};
						this.userList.push(user);
						this.id = this.name = '';
					},
					del(userId) {
						
						let index = this.userList.findIndex(item => item.id==userId);
						this.userList.splice(index, 1);
					},
					search(keyWord) {
						return this.userList.filter(item => item.name.includes(keyWord))
					}
				}
			});
		</script>
	</body>
</html>

功能还有很多很多的缺点，这只是在学习过程中的一个小练习，复习相关知识

这篇关于使用vue实现用户管理 添加及删除功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航