<!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. Kali linux 2016.2（Rolling）里Metasploit的口令猜测与嗅探

    不多说,直接上干货! 对于发现的系统与文件管理类网络服务,比如Telnet.SSH.FTP等,可以进行弱口令的猜测,以及对明文传输口令的嗅探,从而尝试获取直接通过这些服务进入目标网络的通道. 对于SS ...

  2. HTML5，CSS3新特性，与旧版的区别

    HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和inde ...

  3. for循环练习-----ATM取款

    要求: 代码: package com.jianglai.atm; import java.util.Scanner; public class ATM { public static void ma ...

  4. linux系统下，11款常见远程桌面控制软件（转载）

    远程控制能够给人们带来很多便利,本文介绍了11款常见的Linux系统下的远程桌面控制工具,总有一款能适合您. 一. Grdc 它是一个用GTK+编写的,适用于gnome桌面环境的远程桌面访问软件.看图 ...

  5. 在 yii2.0 框架中封装导出html 表格样式 Excel 类

    在 vendor/yiisoft/yii2/helpers/ 创建一个 Excel.php <?php namespace yii\helpers;   class Excel{         ...

  6. 消除textarea的空格de长度值

    在项目中因为用到文本域textarea输入textarea的长度总是显示 25 那是还怀疑textarea自带有value长度? placeholder属性的长度? 那时候想到类似:ul无序列表li元 ...

  7. MAC下搭建appium UI自动化环境

    参考资料: http://qa.blog.163.com/blog/static/190147002201510161119832/ http://blog.csdn.net/liuchunming0 ...

  8. caioj 1106 树形动态规划（TreeDP）1：加分二叉树

    解这道题的前提是非常熟悉中序遍历的方式 我就是因为不熟悉而没有做出来 中序遍历是5 7 1 2 10的话,如果1是根节点 那么5 7 1就是1的左子树,2, 10就是右子树 这就有点中链式dp的味道了 ...

  9. [USACO5.4]奶牛的电信Telecowmunication（网络流）

    P1345 [USACO5.4]奶牛的电信Telecowmunication 题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮 ...

  10. 洛谷—— P1877 [HAOI2012]音量调节

    https://www.luogu.org/problem/show?pid=1877#sub 题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要 ...