使用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 ...
随机推荐
- 冷饭新炒 | 深入Quartz核心运行机制
目录 Quartz的核心组件 JobDetail Trigger 为什么JobDetail和Trigger是一对多的关系 常见的Tigger类型 怎么排除掉一些日期不触发 Scheduler List ...
- GitHub Desktop的使用，创建项目、上传文件，设置忽略文件
下载登陆之后 新建项目File--第一个New repository 然后输入项目名称,选择项目文件夹,最后点Creata repository创建项目 这只是在本地建了项目. 项目文件夹中有其他文件 ...
- Python-统计目录（文件夹）中Excel文件个数和数据量
背景:前一阵子在帮客户做Excel文件中的数据处理,但是每周提交周报,领导都需要统计从客户接收的文件数量以及记录数.所以我就简单写了统计的脚本,方便统计目录(文件夹)中的Excel文件个数和数据量. ...
- Android开发万能Utils（工具大全）
AndroidUtils Android开发不得不收藏的Utils About AndroidUtilCode 是一个强大易用的安卓工具类库,它合理地封装了安卓开发中常用的函数,具有完善的 Demo ...
- 关于windows11的0x800f0950语言包安装失败
最近windows11的风头很热,作为爱折腾的人,当然要去搞一搞啦.搞好了以后我发现中文语言的拓展包是无法安装的,于是我找到了3个办法,当然如果想100%成功的话我建议直接跳到第三个,如果你不嫌累,指 ...
- linux学习之路第八天(组管理和权限管理）
组管理和权限管理 1.Linux 组基本介绍 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者,所在组,其他组的概念 1)所有者 2)所在组 3)其它组 4)改变 ...
- Mybatis代码自动生成（含测试）
一.建立数据库 create database shixun; use shixun; create table user( id int primary key auto_increment , u ...
- 如果面试官问你 JVM，额外回答逃逸分析技术会让你加分！
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章. 引言 我在面试别人的过程中,JVM 内存模型我几乎必问,虽然有人说问这些就是面试造航母,工作 ...
- 『动善时』JMeter基础 — 55、JMeter非GUI模式运行
目录 1.JMeter的非GUI模式说明 2.为什么使用非GUI模式运行JMeter 3.怎样使用非GUI模式运行JMeter (1)非GUI模式运行JMeter步骤 (2)其它参数说明 4.CLI模 ...
- C语言:进制表示
二进制由 0 和 1 两个数字组成,使用时必须以0b或0B(不区分大小写)开头 八进制由 0~7 八个数字组成,使用时必须以0开头(注意是数字 0,不是字母 o) 十六进制由数字 0~9.字母 A~F ...