VueJS实现用户管理系统
本文实例为大家分享了VueJS实现用户管理系统的具体代码，供大家参考，具体内容如下
源代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户管理系统</title>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" type="text/css">
<script>
$(function () {
let vm = new Vue({
el: '#app',
data: {
user: {},
users: [
{name: 'Switch', age: 25, email: 'switchvov@163.com'},
{name: 'Kitty', age: 25, email: 'kitty@163.com'},
],
nowIndex: -1, // 当前要删除项的索引
delIndexes: [], // 删除项索引列表
selectAll: false, // 删除所有
disableDelSelect: true, // 关闭删除选项
modalTarget: '',
modalToggle: ''
},
methods: {
addUser: function () {
this.users.push(this.user);
this.user = {};
},
deleteUser: function () {
if (this.delIndexes.length > 0) {
// 从大到小排序，不排序则会出现删除错乱
this.delIndexes.sort(function (a, b) {
return b - a;
});
for (let i = 0; i < this.delIndexes.length; i++) {
this.users.splice(this.delIndexes[i], 1);
}
this.delIndexes = [];
this.selectAll = false;
return;
}
if (this.nowIndex === -1) {
this.users = [];
return;
}
this.users.splice(this.nowIndex, 1);
},
toggleAll: function () {
if (this.selectAll) {
let length = this.users.length;
this.delIndexes = [];
for (let i = 0; i < length; i++) {
this.delIndexes.push(i);
}
return;
}
this.delIndexes = [];
}
},
watch: {
delIndexes: function () {
if (this.delIndexes.length > 0) {
this.disableDelSelect = false;
this.modalTarget = '#del';
this.modalToggle = 'modal';
return;
}
this.disableDelSelect = true;
}
}
});
});
</script>
</head>
<body>
<div id="app" class="container">
<h2 class="text-center">添加用户</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group text-center">
<input type="button" value="添 加" class="btn btn-primary" @click="addUser">
<input type="reset" value="重 置" class="btn btn-primary">
</div>
</form>
<br/>
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">
<input type="checkbox" @click="toggleAll" v-model="selectAll">
</th>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" class="text-center">
<td>
<input type="checkbox" :value="index" :id="index" v-model="delIndexes" @click="selectAll = false">
</td>
<td>{{ index+1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.email }}</td>
<td>
<button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex = index;delIndexes=[]">
删除
</button>
</td>
</tr>
<tr>
<td colspan="6" class="text-right">
<button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex = -1;delIndexes=[]">
删除所有
</button>
<button class="btn btn-danger" :data-toggle="modalToggle" :data-target="modalTarget"
:class="{disabled:disableDelSelect}">
删除选中
</button>
</td>
</tr>
</tbody>
</table>
<!-- 弹出框 -->
<div class="modal" id="del">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" v-show="delIndexes.length > 0">
确认要删除用户
<span v-for="(value, index) in delIndexes">
{{ users[value].name }}
<span v-if="index < delIndexes.length - 1">、</span>
</span>
吗？
</h4>
<h4 class="modal-title" v-show="delIndexes.length === 0 && nowIndex !== -1">
确认要删除用户{{ users[nowIndex] ? users[nowIndex].name : '' }}吗？
</h4>
<h4 class="modal-title" v-show="delIndexes.length === 0 && nowIndex === -1">
确认要删除所有用户吗？
</h4>
</div>
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-primary" data-dismiss="modal" @click="deleteUser">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
GitHub：vue-user-manager
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现信息管理系统
最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
-
vue实现户籍管理系统
本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
-
VueJS实现用户管理系统
本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下 源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1
-
python用户管理系统的实例讲解
学Python这么久了,第一次写一个这么多的代码(我承认只有300多行,重复的代码挺多的,我承认我确实垃圾),但是也挺不容易的 自定义函数+装饰器,每一个模块写的一个函数 很多地方能用装饰器(逻辑跟不上,有的地方没用),包括双层装饰器(不会),很多地方需要优化,重复代码太多 我还是把我的流程图拿出来吧,虽然看着比上次的垃圾,但是我也做了一个小时,不容易! 好像是挺丑的(表示不会画,但我下次一定努力) 用户文件: 文件名为:user.txt 1代表管理员用户 2代表普通用户 smelond|adm
-
python实现用户管理系统
本文实例为大家分享了python实现用户管理系统的具体代码,供大家参考,具体内容如下 <python核心编程>第七章练习题第五题 一.题目描述 userpw2.py.下面的问题和例题7.1中的管理名字-密码的键值对数据程序有关. (a) 修改那个脚本,使他能记录用户上次的登陆日期和时间(用time模块),并与用户密码一起保存起来.程序的界面要求用户输入用户名和密码的提示.无论用户名是否登陆成功,都应有提示,在用户登陆成功后,应更新相应用户的上次登陆时间戳.如果本次登陆与上次登陆在时间上相差不超
-
python用户管理系统
本文实例为大家分享了Python用户管理系统的具体代码,供大家参考,具体内容如下 用户管理系统 1.注册新用户 如果注册用户已经存在,则报错 需要填写信息: name, passwd, gender, email,age 2.用户登录 要求同之前写的用户登录系统 3.注销用户 用户注销时,需要输入用户名和正确的用户密码 4.显示用户信息 显示系统中存在所有已经注册用户的信息 5.退出系统 代码如下 #!/usr/bin/env python #coding:utf-8 info = ""
-
基于Python实现用户管理系统
基于Python的用户管理小系统,包含文件读写操作,实现了用户信息注册和登录的简单功能. class userLogReg: """ Created on 2018.11 @author: tox33 """ def __init__(self): """ :param userFile: 操作的文件 """ self.userFile = "user.txt" de
-
java实现航空用户管理系统
本文实例为大家分享了java实现航空用户管理系统的具体代码,供大家参考,具体内容如下 题目内容: 某航空公司在其航班到达的不同的国家的不同地方设有不同的办事处,这个项目要求开发一个自动化软件系统,该系统将提供给这些办事处的管理者(role=1)和普通用户(role=0)用于管理航班信息.根据以上描述,要求实现系统的用户模块和办事处模块,包含以下功能(注:系统存在一个默认管理员admin/admin123): 用户模块: 1. 用户添加 2. 密码修改 3. 个人信息查看 4. 账号状态修改(禁用
-
Java实现用户管理系统
基于Java的简单的用户管理系统,供大家参考,具体内容如下 此系统功能和方法都比较简单 本次系统通过控制台输入商品的基本信息,加入管理员的登录与对是否为管理员进行操作 对于功能的实现,分别定义了3个类 用户基本属性类 此类包含用户id.账号.密码.年龄.角色(是否为管理员).邮箱.办事处.账户状态 private int id;// id号 private String username;// 账号 private String password;// 密码 private int age;//
-
vuejs响应用户事件（如点击事件）
需求: 页面上的列表原先有3个,我们想点击一次添加一条记录,也可以在头和尾删除数据: 我们也可以删除我们想删除的任意一行记录: 如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦. 这里用vue.js就非常简单. 我们先看页面效果: 页面初始化.png 末尾增加一项.png 删除项.png 再来看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
-
python实现员工管理系统
这是一个简易的员工管理系统,实现最简单的功能: 1.登录用户密码验证(错误三次自动退出) 2.支持文本员工的搜索.添加.删除.修改 3.一级层级多个选项.二级层级多个选项,都支持判空.退出.返回上一层级 4.针对删除和修改有员工当前自动搜索到的结果进行参照修改和特殊提醒是否删除 用到的基础知识点比较多: 1.计数器 2.while True 以及给while做退出层级标记 3.if-elif-else 的嵌套使用 4.continue 和 break 以及简单函数定义def 5.键盘抓取 raw
-
python实现学生管理系统
python写的简单的学生管理系统,练习python语法. 可以运行在windows和linux下,python 2.7. #!/usr/local/bin/python # -*- coding:utf-8 -*- import os import re #定义学生类 class Student: def __init__(self): self.name = '' self.ID = '' self.score = 0 #根据学生分数进行从大到小的冒泡排序 def BuddleSortByS