<!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>×</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. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  2. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

  3. Vue 变异方法Push的留言板实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue+egg.js+mysql一个前后端分离留言板项目

    一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...

  5. 微信小程序实现简易留言板

    微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...

  6. AngularJs学习笔记（制作留言板）

    原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...

  7. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  8. asp.net留言板项目源代码下载

    HoverTree是一个asp.net开源项目,实现了留言板功能. 前台体验网址:http://hovertree.com/guestbook/ 后台请下载源代码安装. 默认用户名:keleyi 默认 ...

  9. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  10. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

随机推荐

  1. SQL 查询 总结 【行子查询 ； 列子查询 ； 表子查询 ； 自链接 ； 内连接 ；外连接 ； 无规则链接 ……】

    简单介绍一下连接方式: 1.1.使用无连接规则连接两表  无限规则  也就简单的 select * from tableA , tableB  即得到一个笛卡尔积.  什么是 笛卡尔积 在 我的 另外 ...

  2. 脱发秘籍：前端Chrome调试技巧汇总

    Chrome浏览器调试工具的核心功能: 注:本文测试.截图均为Edge浏览器(内核是Chromium),浏览器内核可了解<有哪些浏览器/内核?> 00.基础操作汇总 操作类型 快捷键/说明 ...

  3. 【EF Core】主从实体关系与常见实体关系的区别

    上次老周扯了有关主.从实体的话题,本篇咱们再挖一下,主.从实体之间建立的关系,跟咱们常用的一对一.一对多这些关系之间有什么不同. 先看看咱们从学习数据库开始就特熟悉的常用关系--多对多.一对一.一对多 ...

  4. 利用Redis实现向量相似度搜索：解决文本、图像和音频之间的相似度匹配问题

    在自然语言处理领域,有一个常见且重要的任务就是文本相似度搜索.文本相似度搜索是指根据用户输入的一段文本,从数据库中找出与之最相似或最相关的一段或多段文本.它可以应用在很多场景中,例如问答系统.推荐系统 ...

  5. JDBC:使用IDEA配置JDBC

    IDEA使用Jar包 操作流程 步骤1:创建lib路径 步骤2:复制jar包 步骤3:必须要做的一步 参考链接 https://blog.csdn.net/upup1006/article/detai ...

  6. Kitex微服务开发实践(ETCD服务注册)

    服务注册通常用于分布式系统或微服务架构中,是一种用于管理和发现这些分布式服务的机制.它的目标是让服务能够动态地找到其他服务,并能够与其进行通信,而无需显式地配置其位置信息 本文简单讲述使用etcd进行 ...

  7. idea 2021新窗口打开工程

    描述 Mac M1,IDEA 2017 有部分兼容性问题,遂对IDEA进行升级 idea 升级2021(IntelliJ IDEA 2021.3 (Community Edition)) 打开新工程, ...

  8. 1. 通俗易懂的Redis基础

    通俗易懂的Redis基础教程(基于CentOS 7) 目录 通俗易懂的Redis基础教程(基于CentOS 7) 1 Redis是什么 1.1 NoSQL概念 1.2 NoSQL与SQL比较 1.3 ...

  9. 自治系统/自治域和自治系统编号（ASN）

    定义: 自治系统或自治域(英文:Autonomous system, AS)是指在互联网中,一个或多个实体管辖下的所有IP网络和路由器的组合,它们对互联网执行共同的路由策略.参看RFC 1930中更新 ...

  10. cockpit--一款开源的适用于单主机的Linux监控面板

    在搜索Linux监控时,偶然发现一款还不错的监控面板,该面板为red hat开发,适用于各种Linux发行版,部署也非常方便,官方文档Running Cockpit - Cockpit Project ...