VueJS实现用户管理系统

@(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" 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>&times;</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

VueJS实现用户管理系统相关推荐

用户管理系统控制台版连接数据库
建User表 CREATE TABLE `user` (`id` INT(11) NOT NULL AUTO_INCREMENT,`name` VARCHAR(20) DEFAULT NULL,`pw ...
portainer忘记用户名密码_【20201122】做个用户管理系统（6）——忘记密码页面、重置密码方式页面的模板制作...
1. 介绍 1.1 介绍今天福哥跟大家完成忘记密码页面和重置密码方式页面的模板的制作,这里面忘记密码和重置密码方式是一个操作流程的前两步,是连续的表里的设计.这种多步骤表单在的设计需要一些技巧的,我 ...
python管理系统-基于Python实现用户管理系统
基于Python的用户管理小系统,包含文件读写操作,实现了用户信息注册和登录的简单功能. class userLogReg: """ Created on 2018.11 ...
python写管理系统-基于Python实现用户管理系统
基于Python的用户管理小系统,包含文件读写操作,实现了用户信息注册和登录的简单功能. class userLogReg: """ Created on 2018.11 ...
四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
三十九、Vue项目上手 | 用户管理系统实现添加用户功能（中篇）
@Author:Runsen @Date:2020/7/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
三十八、Vue项目上手 | 用户管理系统（上篇）
@Author:Runsen @Date:2020/7/7 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
用户管理系统_【20201204】做个用户管理系统（18）——注册功能的实现（三）...
1. 介绍 1.1 介绍福哥今天要带着大家开发TFUMS系统的注册功能的处理程序了.这个处理程序会调用模型user的add方法进行创建用户的操作,模型user的add方法会先检查用户名是否被占用了, ...

VueJS实现用户管理系统

VueJS实现用户管理系统

源代码

VueJS实现用户管理系统相关推荐

最新文章

热门文章