<!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. BZOJ 1063 道路设计（树形DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1063 题意:给出一个无环图( 也就是树,但是也有可能是森林),代表一个国家的城市.1是首 ...

  2. C Looooops（扩展欧几里得）题解

    A Compiler Mystery: We are given a C-language style for loop of type  for (variable = A; variable != ...

  3. spring boot 使用@ConfigurationProperties

    有时候有这样子的情景,我们想把配置文件的信息,读取并自动封装成实体类,这样子,我们在代码里面使用就轻松方便多了,这时候,我们就可以使用@ConfigurationProperties,它可以把同类的配 ...

  4. FieldOffset

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.G ...

  5. 基于nodejs环境，用npm简单搭建一个本地服务器Live-server的使用

    用npm 或者cnpm进行全局安装 cnpm install -g live-server 运行后就可以直接给你虚拟一个本地服务器,而且还可以热同步 运行 live-server

  6. Unity3D学习笔记（十八）：动画内容补充

    动画系统: 旧动画系统(帧动画系统:关键帧驱动,关键帧记录的数据进行插值移动) 1.添加Animation,添加到父物体上 2.添加动画片段 3.添加关键帧(子物体的坐标是相对于父物体的坐标),帧之间 ...

  7. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  8. 【Python】【环境搭建】

    [环境配置] Windows : http://blog.csdn.net/zhunianguo/article/details/53524792 [Pycharm] pyCharm最新2018激活码 ...

  9. 获取本机ip的shell脚本

    ifconfig br0 | grep 'inet addr' | sed 's/^.*addr://g' |sed 's/ Bcast:.*$//g' 注意:br0为网卡名称,需要改成你使用的网卡名 ...

  10. Jmeter测试API接口，用Jmeter自动化之检查DB数据

    如上: 注册接口,会新增数据,要怎么自动化检查DB中生成的数据呢? 很简单,只需要以下几个配置元件 JSON截取器或者正则表达式截取器:目的在于取出返回消息体中的数据aa JDBC后置处理器:目的在于 ...