<!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. C#调用非托管dll

    以C#开发周立功CAN举例,在官网下载了周立功的demo 一.C++头文件样子 //接口卡类型定义#define VCI_PCI5121 1 //一些结构体定义 typedef struct tagR ...

  2. linux交叉编译gcc4.8.3

    1.环境: Ubuntu 16.04 2.获取 wget mirrors.ustc.edu.cn/gnu/gcc/gcc-4.8.3/gcc-4.8.3.tar.bz2 3.解压 tar xvf gc ...

  3. HDU 1863 畅通工程 （最小生成树

    看卿学姐视频学到的题目 kruskal算法实现最小生成树 #include<bits/stdc++.h> using namespace std; ; typedef long long ...

  4. [JVM] - 一份<自己动手写Java虚拟机>的测试版

    go语言下载 配置GOROOT(一般是自动的),配置GOPATH(如果想自己改的话) 参照<自己动手写Java虚拟机> > 第一章 指令集和解释器 生成了ch01.exe文件 这里还 ...

  5. yunw

  6. 下列java代码中的变量a、b、c分别在内存的______存储区存放。

    class A{ private String a = "aa"; public boolean methodB(){ String b = "sb"; fin ...

  7. c++ 指定长度容器元素的拷贝（copy_n）

    #include <iostream>     // cout #include <algorithm>    // copy #include <vector> ...

  8. bash Shell 中如何实现条件判断之if判断

    http://blog.51cto.com/lovelace/1211353 bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式:     ...

  9. 使用innerHTML时要注意的一点

    为某个元素添加内容时,使用的是document.getElementsByClassName,由于只有一个元素拥有这样的ClassName,就直接这样用,document.getElementsByC ...

  10. Java 常用对象-System类

    2017-11-02 21:41:06 System类:System 类包含一些有用的类字段和方法.它不能被实例化. *常用方法 public static void gc() 运行垃圾回收器. 调用 ...