使用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 ...
随机推荐
- 安装nodejs版本模块报错notsup Unsupported platform for n
使用npm install -g n报错 如果出现npm ERR! notsup Unsupported platform for n@6.7.0: wanted {"os":&q ...
- sql循环说明
while循环:主要是判断,不能使用表中的ID,临时表是ID自增的,通过自增ID可以查出表ID(语法简单,需要配合其他代码操作表ID)游标循环:可以使用表中的ID ,进行修改等操作(语法难一点,核心代 ...
- 解决“与 Microsoft Exchange 的连接不可用，Outlook 必须联机或已连接才能完成此操作”
Microsoft Outlook 是一种用于发送和接收电子邮件的应用程序.由于其可靠性和各种使用类型,它在企业公司中非常受欢迎.Outlook 还可用于管理各种类型的个人数据,如日历约会.联系人.邮 ...
- Python中Random随机数返回值方式
1.a=["1","2","3"] print(random.choice(a)), 随机返回列表a中的一个元素 print(random ...
- yolov5 AssertionError: Image Not Found解决方案
运行yolov5 train.py报错:AssertionError: Image Not Found ../data/images/xxx.png 运行环境 一开始在笔记本上用显卡跑训练是可 ...
- 在ubuntu16下编译openJDK11
为什么需要编译自己的jvm源码? 想象下, 你想看看java线程是如何start的? 去源码里一找 native void start0(), 此时如果你对jvm源码比较熟悉, 那么可以下载openJ ...
- 1.3.4、通过Host匹配
server: port: 8080 spring: application: name: gateway cloud: gateway: routes: - id: guo-system4 uri: ...
- XCTF Hello CTF
一.查壳 二.拖入ida x86静态分析 shift +F12找到字符串. 发现关键字please input your serial 点击进入 这是我们的主函数,F5反编译一下,看一下逻辑. 这里有 ...
- 32. Longest Valid Parentheses **堆栈
description: Given a string containing just the characters '(' and ')', find the length of the longe ...
- Vue高阶
Vue.cli是基于vue应用开发提供的一个脚手架工具,为应用搭建基础的框架架构,提供插件.开发服务.打包等功能. 1. 安装 node.js是一个JavaScript的运行环境,提供了一个事件驱动. ...