1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>练习vue（用户管理）</title>
  7.         <link rel="stylesheet" href="css/bootstrap.min.css" />
  8.         <script src="js/vue.js"></script>
  9.         <script src="js/jquery-3.2.1.min.js"></script>
  10.         <script src="js/bootstrap.min.js"></script>
  11.         <script type="text/javascript">
  12.             window.onload = function() {
  13.                 let vm = new Vue({
  14.                     el: '.container',
  15.                     data: {
  16.                         users: [
  17.                             { name: 'tom', age: 24, email: 'tom@itany.com' },
  18.                             { name: 'jack1', age: 23, email: 'jack@1232.com' },
  19.                             { name: 'jack222', age: 23, email: 'jack@1232.com' }
  20.                         ],
  21.                         user: {},
  22.                         nowIndex: -1
  23.                     },
  24.                     methods: {
  25.                         adduser() {
  26.                             this.users.push(this.user);
  27.                             this.user = {};
  28.                         },
  29.                         deluser() {
  30.                             if(this.nowIndex === -1) {
  31.                                 this.users = {}
  32.                             } else {
  33.                                 this.users.splice(this.nowIndex, 1);
  34.                             }
  35.  
  36.                         },
  37.                         print(e) {
  38.                             console.log(e);
  39.                         }
  40.                     }
  41.                 });
  42.             }
  43.         </script>
  44.     </head>
  45.  
  46.     <body>
  47.         <div class="container">
  48.             <h3 class="text-center">添加用户</h3>
  49.             <form class="form-horizontal">
  50.                 <div class="form-group">
  51.                     <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
  52.                     <div class="col-sm-6">
  53.                         <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名" />
  54.                     </div>
  55.                 </div>
  56.                 <div class="form-group">
  57.                     <label for="age" class="control-label col-sm-2 col-sm-offset-2">年龄：</label>
  58.                     <div class="col-sm-6">
  59.                         <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄" />
  60.                     </div>
  61.                 </div>
  62.                 <div class="form-group">
  63.                     <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱：</label>
  64.                     <div class="col-sm-6">
  65.                         <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱" />
  66.                     </div>
  67.                 </div>
  68.                 <div class="form-group text-center">
  69.                     <input type="button" name="" id="" value="添 加" class="btn btn-primary" v-on:click="adduser()" />
  70.                     <input type="reset" name="" id="" value="重 置" class="btn btn-primary" />
  71.                 </div>
  72.  
  73.             </form>
  74.             <table class="table table-bordered table-hover">
  75.                 <caption class="h3 text-center">用户列表</caption>
  76.                 <thead>
  77.                     <tr>
  78.                         <th>序号</th>
  79.  
  80.                         <td>姓名</td>
  81.  
  82.                         <th>年龄</th>
  83.  
  84.                         <td>邮箱</td>
  85.  
  86.                         <td>操作</td>
  87.                     </tr>
  88.                 </thead>
  89.                 <tbody>
  90.                     <tr v-for="(user,index) in users">
  91.                         <td>{{index+1}}</td>
  92.                         <td>{{user.name}}</td>
  93.                         <td>{{user.age}}</td>
  94.                         <td>{{user.email}}</td>
  95.                         <td class="text-right">
  96.                             <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
  97.                         </td>
  98.                     </tr>
  99.                     <tr>
  100.                         <td colspan="5" class="text-right">
  101.                             <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
  102.                             <button @click="print($event)">click me</button>
  103.                         </td>
  104.                     </tr>
  105.                 </tbody>
  106.  
  107.             </table>
  108.             <div class="modal" id="del">
  109.                 <div class="modal-dialog">
  110.                     <div class="modal-content">
  111.                         <div class="modal-header">
  112.                             <button class="close" data-dismiss="modal">
  113.                                 <span>
  114.                                 &times;
  115.                                 </span>
  116.                             </button>
  117.                             <h4 class="modal-title" v-show="nowIndex!==-1">确认删除用户：{{users[nowIndex]?users[nowIndex].name:''}}吗？</h4>
  118.                             <h4 class="modal-title" v-show="nowIndex===-1">确认删除所有用户吗？</h4>
  119.                         </div>
  120.                         <div class="modal-body text-center">
  121.                             <button class="btn btn-primary" data-dismiss="modal" v-on:click="deluser()">确定</button>
  122.                             <button class="btn btn-primary" data-dismiss="modal">取消</button>
  123.  
  124.                         </div>
  125.                     </div>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </body>
  130.  
  131. </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. 【前端】javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将displ ...

  2. VS中 Winform查看窗体内控件之间的相互关系

    视图----其他窗口----文档大纲 这样可以查看之前的窗体布局关系

  3. [BZOJ3609][Heoi2014]人人尽说江南好 结论题

    Description 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家), 最近他 想起了小时候在江南玩过的一个游戏.     在过去,人们是要 ...

  4. shiro(1) 介绍

    一.什么是shiro (1)属性:java框架 (2)用途:身份验证.用户授权.加密.会话管理 (3)优点:轻量.易用 二.三大组件 (1)subject:代表当前主体,与当前应用交互的任何东西都是s ...

  5. 【转】<c:forEach varStatus="status">中 varStatus的属性简介 及应用

    转载原因:在做页面的时候,需要在页面中判断循环了第几次和一共循环了多少次,在网上搜集的时候,看到这篇帖子,觉得太全面了,于是转载了.... varStatus是<c:forEach>jst ...

  6. python 获取文件的修改时间

    os.path.getmtime(name) #获取文件的修改时间 os.stat(path).st_mtime#获取文件的修改时间 os.stat(path).st_ctime #获取文件修改时间 ...

  7. DataSet 动态添加列

    public DataSet GetNewId(List<string> IdArr) { DataSet ds = new DataSet(); DataTable newtb = ne ...

  8. ubuntu14.04, libtinyxml.so.2.6.2: cannot open shared object file: No such file or directory

    打包/opt/ros 打包项目文件install 到一台没有安装ros环境的机器上启动项目 source ros/indigo/setup.bash source install/setup.bash ...

  9. Qt5.3.2_Oracle驱动

    参考网址:http://blog.csdn.net/sdqyhn/article/details/39855847 ZC: 将编译好的 qsqloci.dll和qsqlocid.dll 放到 目录“E ...

  10. vs2010的VCVARS32.BAT所在位置

    1. C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\bin\vcvars32.bat 2. ZC:vs08 和 vs2010 安装好后, ...