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

添加及删除功能

<!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实现用户管理 添加及删除功能的更多相关文章

  1. 练习vue（用户管理）1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

  3. [vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件

    前言 今天接到领导布置的一个任务,是之前同事负责的项目.离职了,现在客户有些地方需要修改,由于我之前参与过,就落在我的头上了. 然后我就把代码弄了过来,打开发现其中需要用到水晶报表.(我觉得不好用,不 ...

  4. linux 用户/用户组添加修改删除(ubuntu/centos)

    一.LINUX(UBUNTU/CENTOS)用户添加删除修改 1.建用户: adduser web                             //新建web用户 useradd web  ...

  5. react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...

  6. java 12-3 StringBuffer的添加和删除功能

    1. StringBuffer的添加功能: public StringBuffer append(String str):可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 public ...

  7. 自定义listView添加滑动删除功能

    今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...

  8. StringBuffer的添加与删除功能

    StringBuffer的添加功能A* public StringBuffer append(String str): * 可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 B* pu ...

  9. linux用户管理添加用户的默认配置文件useradd详解

    /etc/default/useradd 文件 cat /etc/default/useradd 常用命令: useradd  添加用户 userdel   删除用户 passwd   改密码 use ...

随机推荐

  1. [.NET Core知识点回顾]-自动内存管理

    自动内存管理是公共语言运行时在托管执行过程中提供的服务之一.公共语言运行时的垃圾回收器为应用程序管理内存 的分配和释放.对开发人员而言,在开发托管应用程序时不必编写执行内存管理任务代码. 分配内存 初 ...

  2. WEB安全新玩法 [4] 防护邮箱密码重置漏洞

    大部分具有账号系统的应用都会提供重置用户登录密码的功能,常见方式之一是:用户输入自己的邮箱地址或手机号,应用向这个邮箱或手机号发送验证码,用户将收到的验证码输入应用中即可完成密码重置.这一过程容易因设 ...

  3. 01 Linux系统配置初始化

    #/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin # 更改主机名 # hostnam ...

  4. 22、编译安装nginx及性能优化

    22.1.编译安装nginx: 1.下载nginx: [root@slave-node1 ~]# mkdir -p /tools/ [root@slave-node1 ~]# cd /tools/ [ ...

  5. Linux 安装 git

    安装方法参考:http://www.jb51.net/os/RedHat/149653.html 具体内容: 在安装Git之前,需要先安装一些依赖包,安装依赖包之前可以先检查下是否已经安装. shel ...

  6. hadoop操作hdfs错误

    本文转自:http://www.aboutyun.com/blog-61-22.html 当我们对hdfs操作的时候,我们可能会碰到如下错误 错误1:权限问题 Exception in thread ...

  7. Java实验项目三——平面图形和立体图形抽象类

    Program:按照下面要求完成类的设计 (1)设计一个平面图形抽象类和一个立体图形抽象类,提供该类对象公共的方法和属性. (2)修改项目三中第2题中所设计的球类.圆柱类,圆锥类.矩形类.三角形类.圆 ...

  8. Windows环境mysql自动备份

    1.编写bat文件备份mysql 1 rem ******MySQL backup start****** 2 @echo off 3 4 ::删除一周前的备份数据 5 forfiles /p &qu ...

  9. C语言：char讲解与例子

    #include <stdio.h> main() { char bla,blb,blc;//声明或定义三个字符型变量,变量名为bla,blb,blc //字符型数据用标识符char来标识 ...

  10. viewport深入理解和使用

    什么是viewport ? viewport是用户网页的可视区域,也可叫做视区.手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口比屏幕宽,这样就不用把网页挤到很小的窗口中 ...