<!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. JAVA I/O（六）多路复用IO

    在前边介绍Socket和ServerSocket连接交互的过程中,读写都是阻塞的.套接字写数据时,数据先写入操作系统的缓存中,形成TCP或UDP的负载,作为套接字传输到目标端,当缓存大小不足时,线程会 ...

  2. hosts 位置和功能

    什么是HOST文件: Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hos ...

  3. P3216 [HNOI2011]数学作业 （矩阵快速幂）

    P3216 [HNOI2011]数学作业 题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 NN 和 MM ,要求计算 Concatenate (1 .. N ...

  4. BZOJ2662: [BeiJing wc2012]冻结 spfa+分层图

    Description “我要成为魔法少女!”     “那么,以灵魂为代价,你希望得到什么?” “我要将有关魔法和奇迹的一切,封印于卡片之中„„”        在这个愿望被实现以后的世界里,人们享 ...

  5. about MySQL Workbench的基本使用及运用操作

    http://blog.csdn.net/dongdong9223/article/details/48318877   <大神整理的更好!(评论里还有其他整理的) ↑ 使用MySQL Work ...

  6. NOI 7614 最低通行费（多段图最短路）

    http://noi.openjudge.cn/ch0206/7614/ 题意: 有一个N*N的正方形网格,商人从网格的左上角进,右下角出.每穿越中间1个小方格,都要花费1个单位时间.商人必须在(2N ...

  7. python学习站点

    1.python 外部扩展网址 http://www.lfd.uci.edu/~gohlke/pythonlibs Python Extension Packages 2.web2py学习 http: ...

  8. VS 修改模板文件,增加默认注释

    其实这篇文章是从网上转载的,但是找不到转载链接,只能自己复制过来了 vs中的///文档注释类似java中/** */文档注释.能自动的生成帮助文档. 如果我想在每次创建文件时,自动生成文档注释(注意是 ...

  9. MongoDB（课时24 全文索引）

    3.6.3 全文索引 在一些信息管理平台上经常需要进行信息模糊查询,最早的时候是利用了某个字段上实现的模糊查询,但这个时候返回的信息并不会很准确,因为只能够查A字段或B字段,而在MongoDB里面实现 ...

  10. map/multimap_01

    标准的关联式容器 键值对序列 基于key的快速检索能力 key按序排列,按序插入 红黑树变体的平衡二叉树 对key来说支持 mapT[key] 和 mapT.at(key) multimap 不支持  ...