<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>添加删除用户数据</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

     <meta name="apple-mobile-web-app-capable" content="yes">

     <meta name="apple-mobile-web-app-status-bar-style" content="black">

     <style>

     </style>

     <link rel="stylesheet" href="lib/bootstrap.min.css">

     <script src="lib/jquery-1.7.2.js"></script>

     <script src="lib/bootstrap.js"></script>

     <script src="vue.js"></script>

     <script>

         window.onload=function(){

             new Vue({

                 el:'#box',

                 data:{

                     myData:[],

                     username:'',

                     age:'',

                     nowIndex:-100

                 },

                 methods:{

                     add:function(){

                         this.myData.push({

                             name:this.username,

                             age:this.age

                         });

                         this.username='';

                         this.age='';

                     },

                     deleteMsg:function(n){

                         if(n==-2){

                             this.myData=[];

                         }else{

                             this.myData.splice(n,1);

                         }

                     }

                 }

             });

         };

     </script>

 </head>

 <body>

 <div class="container" id="box">

     <form role="form">

         <div class="form-group">

             <label for="username">用户名:</label>

             <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">

         </div>

         <div class="form-group">

             <label for="age">年　龄:</label>

             <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">

         </div>

         <div class="form-group">

             <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">

             <input type="reset" value="重置" class="btn btn-danger">

         </div>

     </form>

     <hr>

     <table class="table table-bordered table-hover">

         <caption class="h3 text-info">用户信息表</caption>

         <tr class="text-danger">

             <th class="text-center">序号</th>

             <th class="text-center">名字</th>

             <th class="text-center">年龄</th>

             <th class="text-center">操作</th>

         </tr>

         <tr class="text-center" v-for="item in myData">

             <td>{{$index+1}}</td>

             <td>{{item.name}}</td>

             <td>{{item.age}}</td>

             <td>

                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>

             </td>

         </tr>

         <tr v-show="myData.length!=0">

             <td colspan="4" class="text-right">

                 <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>

             </td>

         </tr>

         <tr v-show="myData.length==0">

             <td colspan="4" class="text-center text-muted">

                 <p>暂无数据....</p>

             </td>

         </tr>

     </table>

     <!--模态框 弹出框-->

     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">

         <div class="modal-dialog">

             <div class="modal-content">

                 <div class="modal-header">

                     <button type="button" class="close" data-dismiss="modal">

                         <span>&times;</span>

                     </button>

                     <h4 class="modal-title">确认删除么?</h4>

                 </div>

                 <div class="modal-body text-right">

                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>

                     <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>

                 </div>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

vue简单案例_动态添加删除用户数据的更多相关文章

  1. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  2. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [CentOS]添加删除用户

    摘要 在安装CentOS的时候,我们只设置了root,类似windows的超级管理员.当然我们在工作的时候,为了安全考虑,不可能对外开发root,一方面是从安全的角度,另一方面也是方便管理. 添加删除 ...

  4. js实现网页收藏功能，动态添加删除网址

    <html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...

  5. centos的用户、组权限、添加删除用户等操作的详细操作命令

    1.Linux操作系统是多用户多任务操作系统,包括用户账户和组账户两种 细分用户账户(普通用户账户,超级用户账户)除了用户账户以为还 有组账户所谓组账户就是用户账户的集合,centos组中有两种类型, ...

  6. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  7. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  8. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  9. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

随机推荐

  1. 【Gin-API系列】Gin中间件之日志模块（四）

    日志是程序开发中必不可少的模块,同时也是日常运维定位故障的最重要环节之一.一般日志类的操作包括日志采集,日志查询,日志监控.日志统计等等.本文,我们将介绍日志模块在Gin中的使用. Golang如何打 ...

  2. MySQL数据库练习题

    表结构 DROP DATABASE IF EXISTS test1; CREATE DATABASE test1; USE test1; ##部门表 #DROP IF EXISTS TABLE DEP ...

  3. DataNode（面试开发重点）

    1 DataNode工作机制 DataNode工作机制,如图所示. 1)一个数据块在DataNode上以文件形式存储在磁盘上,包括两个文件,一个是数据本身,一个是元数据包括数据块的长度,块数据的校验和 ...

  4. 团队作业5：Alpha版本测试和发布（歪瑞古德小队）

    目录 一.项目文档和代码 二.Alpha版本测试报告 2.1 功能测试 2.1.1 功能列表 2.1.2 场景测试 2.1.3 测试结果 2.1.4 bug清单 2.2 兼容性测试 2.3 性能测试 ...

  5. latex:公式的上下标

    1.行内公式的上下标 在行间公式中,例如\[\max_{i}\]的排版结果是 而在行内公式中,$max_{i}$的排版结果为 ,如果要使其仍在正下方,可插入字体尺寸档次命令 $\displaystyl ...

  6. 问卷星导入数据到SPSS，数据变成-3是什么原因？

    问卷星将数字“-3”表示为筛选或者跳转题:如果问卷中有设计筛选或者跳转,此时则会出现“-3”这个数字. 解决办法1 分析时首先进行筛选,然后再分析,便不会出现“-3”,而且一定需要这样进行.“筛选样本 ...

  7. Java数据结构——树、二叉树的理论知识汇总

    通用树的理论知识 一.树的定义 由一个或多个(n>=0)节点组成的有限集合T,有且仅有一个节点称为根(root),当n>1时,其7余的节点为m(m>=0)个互不相交的有限集合T1,T ...

  8. 区块链入门到实战（17）之以太坊(Ethereum) – 是什么

    以太坊的作用:构建基于区块链的分布式应用. 以太坊是什么:可编程的虚拟币. 以太坊(Ethereum)是一个可编程的虚拟币,它是一个基于公共区块链的分布式计算平台,可用于构建基于区块链的分布式应用. ...

  9. Java面试题 200+

    面试题包含的内容了十九了模块:Java 基础.容器.多线程.反射.对象拷贝.Java Web 模块.异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Cl ...

  10. 力扣Leetcode 33. 搜索旋转排序数组

    33. 搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值, ...