使用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 ...
随机推荐
- split截取字符串
一.根据单个分隔字符用split截取字符串:string st="GT123_1";split代码:string[] sArray=st.split("_"); ...
- Java中对象调用方法的顺序
Java虚拟机会预先为加载到内存中的每个类维护一个方法表(Method Table),其中列出了所有类中所有方法的签名. 现在有2个类A和B,其中,B是A的子类,和一个B类型的对象x,当调用x.f(a ...
- Linux 从头学 01：CPU 是如何执行一条指令的？
作 者:道哥,10+年的嵌入式开发老兵. 公众号:[IOT物联网小镇],专注于:C/C++.Linux操作系统.应用程序设计.物联网.单片机和嵌入式开发等领域. 公众号回复[书籍],获取 Linux. ...
- 36、网卡绑定bond
注意:虚拟机需要网卡模式为同一模式,否则无法进行通信: 36.1.mode0(平衡负载模式): 平时两块网卡均工作,且自动备援,但需要在与服务器本地网卡相连的交换机设备上进行端口聚合来支持绑定技术. ...
- 11、linux的目录结构
11.1.查看磁盘的id: blkid 11.2.linux目录类似一个倒挂的树: / 是所有目录的顶点,目录磁盘和分区是没有关联的,因此/下不同的目录会对应不同的磁盘的不同的分区: linux中硬盘 ...
- 如何使用原生的Feign
什么是Feign Feign 是由 Netflix 团队开发的一款基于 Java 实现的 HTTP client,借鉴了 Retrofi. JAXRS-2.0.WebSocket 等类库.通过 Fei ...
- 大数据 | 分布式文件系统 HDFS
HDFS全称Hadoop Distributed File System,看名字就知道是Hadoop生态的一个组件,它是一个分布式文件系统. 它的出现解决了独立机器存储大数据集的压力,它将数据集进行切 ...
- SpringCloud：扩展zuul配置路由访问
继续上次整合SpringCloud的demo进行扩展zuul:https://www.cnblogs.com/nhdlb/p/12555968.html 这里我把zuul划分出一个模块单独启动 创建 ...
- 在 Docker 上配置 Oracle
地址:https://github.com/wnameless/docker-oracle-xe-11g .直接 git clone 到本地就行了 ##安装 docker shell 下: docke ...
- Acunetix在SDLC中的安全性测试
DevOps只是害怕尝试新事物.它们用于Selenium测试,这些测试占用了管道并提供了难以解释的结果,但是与此同时,它们经常避开了DAST测试,这远没有那么麻烦. 由于他们的应用程序是完全用Java ...