<!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. 高斯日记|2013年蓝桥杯B组题解析第一题-fishers

    高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几 ...

  2. CSS3 常用选择器

    p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...

  3. sql server 存储过程 procedure

    https://www.cnblogs.com/selene/p/4483612.html

  4. Android Studio下载新的AVD映像把C盘给占满了

    不管你的Android SDK/Studio安装哪儿, 默认总是下载到 C:\Users\Administrator\.android ... 可以设置ANDROID_SDK_HOME 指定到新的目录 ...

  5. UVa 1625 颜色的长度

    https://vjudge.net/problem/UVA-1625 题意: 输入两个长度分别为n和m的颜色序列,要求按顺序合并成同一个序列,即每次可以把一个序列开头的颜色放到新序列的尾部.对于每个 ...

  6. URL重写与URL路由

    要介绍这两个内容,必须要从ASP.NET管线说起. ASP.NET管线 管线(Pipeline)这个词形象地说明了每个Asp.net请求的处理过程: 请求是在一个管道中,要经过一系列的过程点,这些过程 ...

  7. sliva数据库简介--转载

    sliva rRNA数据库(http://www.arb-silva.de/)用来检查和比对RNA序列,既可以针对16S/18S,SSU,也可以针对23S/28S, LSU,包括了Bacteria, ...

  8. 使Apache支持PHP

    1.用记事本打开Apache安装目录下conf文件夹中的httpd.conf文件,找到LoadModule部分的配置代码,在该部分添加下面的代码,将PHP模块加载到Apache服务中,使得Apache ...

  9. go 语言字典元素删除

    package main import "fmt" func main() { /* 创建map */ countryCapitalMap := map[string]string ...

  10. Maven置标签<scope>

    在POM 4中,<dependency>中引入了<scope>,它主要管理依赖的部署.目前<scope>可以使用5个值: * compile,缺省值,适用于所有阶段 ...