使用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实现用户管理 添加及删除功能的更多相关文章
- 练习vue（用户管理）1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
- [vs2008]Visual Studio 2008 SP1添加或删除功能提示查找SQLSysClrTypes.msi文件
前言 今天接到领导布置的一个任务,是之前同事负责的项目.离职了,现在客户有些地方需要修改,由于我之前参与过,就落在我的头上了. 然后我就把代码弄了过来,打开发现其中需要用到水晶报表.(我觉得不好用,不 ...
- linux 用户/用户组添加修改删除(ubuntu/centos)
一.LINUX(UBUNTU/CENTOS)用户添加删除修改 1.建用户: adduser web //新建web用户 useradd web ...
- react.js 之 批量添加与删除功能
最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...
- java 12-3 StringBuffer的添加和删除功能
1. StringBuffer的添加功能: public StringBuffer append(String str):可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 public ...
- 自定义listView添加滑动删除功能
今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...
- StringBuffer的添加与删除功能
StringBuffer的添加功能A* public StringBuffer append(String str): * 可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 B* pu ...
- linux用户管理添加用户的默认配置文件useradd详解
/etc/default/useradd 文件 cat /etc/default/useradd 常用命令: useradd 添加用户 userdel 删除用户 passwd 改密码 use ...
随机推荐
- R的基本使用
一.R的安装 1.进入R的官网,https://cran.r-project.org/ 2.下载对应的版 Downloaad R for Windows > base > Download ...
- 低代码开发LCDP，Power Apps系列 - 搭建入职选购电脑设备案例
低代码简介 上世纪八十年代,美国就有一些公司和实验室开始了可视化编程的研究,做出了4GL"第四代编程语言",到后来衍生成VPL"Visual Programming La ...
- Exponentiation java大数
Exponentiation 大数a的n次幂,直到读到EOF(文件结尾)为止,其中忽略小数后面的0 1 import java.util.*; 2 import java.math.*; 3 impo ...
- shell 调用其他shell脚本中的变量、函数
在Shell中要如何调用别的shell脚本,或别的脚本中的变量,函数呢? 方法一: . ./subscript.sh (两个点之间,有空格) 方法二: source ./subscript. ...
- linux学习之路第六天（文件目录类第二部分）
文件目录类 1.cat指令 作用:查看文件内容,是以只读的方式打开. 基本语法 cat [选项] 要查看的文件 常用选项 -n; 使用细节: cat只能浏览文件,而不能修改文件,通常会和more一起使 ...
- Ha1cyon_CTF－公开赛(wp)
一.babyasm 00007FF7A8AC5A50 push rbp 00007FF7A8AC5A52 push rdi 00007FF7A8AC5A53 sub rsp,238h 00007FF7 ...
- GKCTF X DASCTF 2021_babycat复现学习
17解的一道题,涉及到了java反序列化的知识,学习了. 看了下积分榜,如果做出来可能能进前20了哈哈哈,加油吧,这次就搞了两个misc签到,菜的扣脚. 打开后是个登录框,sign up提示不让注册, ...
- bat自动创建快捷方式并更换图标
1 :: 此脚本主要的作用创建1.自动创建快捷方式:2.自动更换快捷方式图标 2 @echo off 3 >nul 2>&1 "%SYSTEMROOT%\system32 ...
- ES6新增语法(五)——Promise详解
Promise介绍 promise是一个对象,从它可以获取异步操作的消息.有all.race.reject.resolve这几个方法,原型上有then.catch等方法. Promise的两个特点: ...
- SLAM基础算法（1）：卡尔曼滤波
对于一个正在运动中的小车来说,如何准确的知道它所处的位置? 理论家说:我可以通过牛顿公式来计算! 实践家说:给它装个GPS不就得了! 好吧,你们说的听上去都很有道理,但我们到底该相信谁? 现实情况是: ...