<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</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:'',//对应页面的v-model="username"

                    age:'',//对应页面的v-model="age"

                    nowIndex:-100

                },

                methods:{

                    add:function(){

                    console.log(this);//this是vue的运行环境，

                        this.myData.push({//myData要加this，不加this不会绑定到data里面的username

                            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>

vue2留言板的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）

    Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...

  7. [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）

    Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

  8. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  9. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

随机推荐

  1. 网络通信-ping命令

  2. bootstrap如何自定义5列

    废话少说,先上代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> < ...

  3. html页面颜色名称和颜色值转换

    public static string ToHtmlColor(string colorName) { try { if (colorName.StartsWith("#")) ...

  4. PyCharm 2017 Mac 免注册版破解安装说明

    PyCharm 2017 Mac 免注册版破解安装说明 下载完成安装包后,双击打开,将左侧拖拽至右侧应用程序,默认安装. 打开软件,在License server address中填入[http:// ...

  5. 为什么越来越少的开源项目使用 GPL 协议

    原文出处: opensource   译文出处:oschina/王练    前段时间,我在 RedMonk 上看到了一篇来自 Stephen O’Grady 的有趣推文,介绍了开源许可证目前的状态,以 ...

  6. python 自动广播机制 (broadcasting)

    一定要注意,执行 broadcast 的前提在于,两个 ndarray 执行的是 element-wise(按位加,按位减) 的运算,而不是矩阵乘法的运算,矩阵乘法运算时需要维度之间严格匹配.(且矩阵 ...

  7. JVM监控工具介绍jstack, jconsole, jinfo, jmap, jdb, jstat（复制）

    jstack -- 如果java程序崩溃生成core文件,jstack工具可以用来获得core文件的java stack和native stack的信息,从而可以轻松地知道java程序是如何崩溃和在程 ...

  8. [笔记-统计学习方法]感知机模型(perceptron) 原理与实现

    前几天认把感知机这一章读完了,顺带做了点笔记 现在把笔记做第三次的整理 (不得不说博客园的LaTex公式和markdown排版真的不太舒服,该考虑在服务器上建一个博客了) 零.总结 适用于具有线性可分 ...

  9. 关联Anaconda和最新Pycharm2018.3.2

    在Anaconda和Pycharm 2018.3.2 x64都安装好之后,进行Anaconda 与Pycharm的关联操作 首先File -->New Project 打开以后切记要把Proje ...

  10. Android笔记---Intent实现Activity跳转

    学了之前的Android控件以及布局,我们就能够做一些UI的设计了,这里我结合之前的知识.以一个小的登录项目来解说下Activity之间跳转. 先看下效果图: 1.登录界面: 2.点击登录按钮跳转到另 ...