使用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 ...
随机推荐
- Spring Boot下的一种导出Excel文件的代码框架
1.前言 在Spring Boot项目中,将数据导出成Excel格式文件是常见的功能.与Excel文件导入类似,此处也用代码框架式的方式实现Excel文件导出,使得代码具有可重用性,并保持导出数据 ...
- ECMAScript 2021 正式确认
ECMAScript 2021 主要包含内容: ECMAScript 2021 于2021年6月22日获得 ECMA International 的批准.ECMAScript 是标准化的 JavaSc ...
- 一次 RocketMQ 顺序消费延迟的问题定位
一次 RocketMQ 顺序消费延迟的问题定位 问题背景与现象 昨晚收到了应用报警,发现线上某个业务消费消息延迟了 54s 多(从消息发送到MQ 到被消费的间隔): 2021-06-30T23:12: ...
- PUN丨实用API
原文地址:PUN丨实用API 当前房间人数 int num = PhotonNetwork.CurrentRoom.PlayerCount; 当前脚本是否属于当前玩家 //需继承MonoBehavio ...
- Redis的flushall/flushdb误操作
Redis的flushall/flushdb命令可以做数据清除,对于Redis的开发和运维人员有一定帮助,然而一旦误操作,它的破坏性也是很明显的.怎么才能快速恢复数据,让损失达到最小呢? 假设进行fl ...
- 什么是CAP？
1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...
- 使用 Docker 秒速搭建多版本 PHP 开发环境
目录 目标 下载 代理设置 配置环境 PHP 7.2.x,占用本地端口 8081 PHP 5.6.x,占用本地端口 8082 端口映射 local.php72.com -> 127.0.0.1: ...
- 13 Nginx访问日志分析
#!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin # Nginx 日志格式: # ...
- 15、修改sqldeveloper的JDK路径
15.1.说明: 1.第一次使用Oracle SQL Developer时会提示选择JDK路径(只会在第一次使用时提示), 如果选择了高版本的JDK(1.8)路径,可能会出现了如下两种情况: (1)s ...
- 痞子衡嵌入式：对比i.MXRT与LPC在RTC外设GPREG寄存器使用上的异同
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是对比i.MXRT与LPC在RTC外设GPREG寄存器使用上的异同. 本篇是 <在SBL项目实战中妙用i.MXRT1xxx里Syst ...