<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>练习vue（用户管理）</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <script src="js/vue.js"></script>

        <script src="js/jquery-3.2.1.min.js"></script>

        <script src="js/bootstrap.min.js"></script>

        <script type="text/javascript">

            window.onload = function() {

                let vm = new Vue({

                    el: '.container',

                    data: {

                        users: [

                            { name: 'tom', age: 24, email: 'tom@itany.com' },

                            { name: 'jack1', age: 23, email: 'jack@1232.com' },

                            { name: 'jack222', age: 23, email: 'jack@1232.com' }

                        ],

                        user: {},

                        nowIndex: -1

                    },

                    methods: {

                        adduser() {

                            this.users.push(this.user);

                            this.user = {};

                        },

                        deluser() {

                            if(this.nowIndex === -1) {

                                this.users = {}

                            } else {

                                this.users.splice(this.nowIndex, 1);

                            }

                        },

                        print(e) {

                            console.log(e);

                        }

                    }

                });

            }

        </script>

    </head>

    <body>

        <div class="container">

            <h3 class="text-center">添加用户</h3>

            <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" name="" id="" value="添 加" class="btn btn-primary" v-on:click="adduser()" />

                    <input type="reset" name="" id="" value="重 置" class="btn btn-primary" />

                </div>

            </form>

            <table class="table table-bordered table-hover">

                <caption class="h3 text-center">用户列表</caption>

                <thead>

                    <tr>

                        <th>序号</th>

                        <td>姓名</td>

                        <th>年龄</th>

                        <td>邮箱</td>

                        <td>操作</td>

                    </tr>

                </thead>

                <tbody>

                    <tr v-for="(user,index) in users">

                        <td>{{index+1}}</td>

                        <td>{{user.name}}</td>

                        <td>{{user.age}}</td>

                        <td>{{user.email}}</td>

                        <td class="text-right">

                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>

                        </td>

                    </tr>

                    <tr>

                        <td colspan="5" class="text-right">

                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>

                            <button @click="print($event)">click me</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="nowIndex!==-1">确认删除用户：{{users[nowIndex]?users[nowIndex].name:''}}吗？</h4>

                            <h4 class="modal-title" v-show="nowIndex===-1">确认删除所有用户吗？</h4>

                        </div>

                        <div class="modal-body text-center">

                            <button class="btn btn-primary" data-dismiss="modal" v-on:click="deluser()">确定</button>

                            <button class="btn btn-primary" data-dismiss="modal">取消</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

练习vue（用户管理）1的更多相关文章

  1. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  2. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  3. Vue + Element UI 实现权限管理系统 前端篇（十二）：用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  4. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  5. vue入门：用户管理demo

    该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...

  6. vue入门：用户管理demo1

    该demo由前端请求后台服务器获取数据进行渲染 使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.ent ...

  7. 循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  8. 一步步使用SpringBoot结合Vue实现登录和用户管理功能

    前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...

  9. 使用vue实现用户管理 添加及删除功能

    简单的管理系统-增删改查 添加及删除功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

随机推荐

  1. mac下的一些操作

    mac 下修改Hosts文件 : http://www.cnblogs.com/zhangqs008/p/3773623.html mac下装Tomcat服务器: 在苹果系统安装Tomcat:首先下载 ...

  2. Delphi XE5 for Android （一）

    Delphi XE5 出来了,支持Android的开发,试用了一下,有几个问题: 1.只支持ARM7的设备,不支持Inter设备.手上刚好有一个华硕K004,很遗憾用不上,只能用手机试了. 2.要支持 ...

  3. 如何去除 gvim 的 acp和 "option omnifunc is not set" 的问题

    "option omnifunc is not set" 的问题, 确实是困扰了很久的问题! 首先, 在vim中,自动完成是通过两个文件来实现的, 自动完成, 就是 acp: = ...

  4. luogu P2680 运输计划 65分做法

    临近\(noip,AK\)不太现实,暴力才是王道,大佬无视 这里只介绍\(65\)分做法 ① \(m==1\) 的情况 很明显 就一条路径,当然要贪心选着一条路径路上的最大的边喽 傻逼分\(get 2 ...

  5. [BZOJ1497]最大获利

    Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前夜,需要做太多的准备工作,仅就站址选择一 ...

  6. 安卓开发 UI入门

    布局的类型 线性布局 LinearLayout ***  垂直显示 vertical 水平显示 horizontal 文本适应 wrap_content 填充父窗体 match_parent 权重 l ...

  7. UVa 1343 旋转游戏（dfs+IDA*）

    https://vjudge.net/problem/UVA-1343 题意:如图所示,一共有8个1,8个2和8个3,如何以最少的移动来使得中间8个格子都为同一个数. 思路:状态空间搜索问题. 用ID ...

  8. Git operate

    新建远程分支和删除 https://www.jianshu.com/p/ea1dab2de419 使用git branch -a查看所有分支 远程先开好分支然后拉到本地 git checkout -b ...

  9. bugfree 安装配置（Ubuntu16.04 amd 64 Desktop）

    上面是我使用的版本! 1.首先搭建 xampp 下载XAMPP:https://www.apachefriends.org/download.html 注意:下载低版本的,不然之后会找不到mysql ...

  10. python json 文件读写

    import json test_dict = {,,,} print(test_dict) print(type(test_dict))#字典 #dumps 将数据转换成字符串 json_str = ...