最近看完入门API，看完视频自己写了个留言板，因为主要是学习vue，所以就复习了一下bootstrap，布局更简单，先看看样式吧。

简单清晰的布局，先说一下功能，

1.输入用户名密码点击提交放入表格

2.点击删除全部清空表格

3.点击删除按钮，删除当前行

4.当数据没有时提示暂无数据

也没有太多技术问题，我就直接粘代码了。。尴尬

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>

         <script src="../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

         <style type="text/css">

             .inputPadding{

                 width: 30%;

                 margin: 0 auto;

                 margin-top: 5%;

             }

             .input-group {

                 margin: 0 auto;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <div class="inputPadding">

                 <div class="input-group">

                     <span class="input-group-addon">用户名</span>

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

                 </div>

                 <br /><br />

                 <div class="input-group">

                     <span class="input-group-addon">&nbsp;密&nbsp;&nbsp;码&nbsp;</span>

                     <input type="text" class="form-control" placeholder="请输入密码" v-model="pass">

                 </div>

                 <br /><br />

                 <div class="input-group">

                     <button type="button" class="btn btn-primary" @click="submit()"> 提 交 </button>

                     &nbsp;&nbsp;&nbsp;&nbsp;

                     <button type="reset" class="btn btn-warning"> 取 消 </button>

                 </div>

             </div>

             <hr />

             <table class="table table-striped text-center">

                 <caption class="h3 text-center">数据列表</caption>

                 <tr>

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

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

                     <th class="text-center">密码</th>

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

                 </tr>

                 <tr v-for="(item,index) in myData">

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

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

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

                     <td>

                         <button type="button" class="btn" data-toggle="modal" data-target="#myModal"  @click="delLine(index)">删除</button>

                     </td>

                 </tr>

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

                     <td colspan="4">

                         <button type="button" class="btn" data-toggle="modal" data-target="#myModal" @click="allDel()">全部删除</button>

                     </td>

                 </tr>

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

                     <td colspan="4">暂无数据</td>

                 </tr>

             </table>

         </div>

     </body>

 </html>

 <script type="text/javascript">

     window.onload = function(){

         new Vue({

             el: '#box',

             data: {

                 user: '',

                 pass: '',

                 myData: [],

                 nowIndex: -100

             },

             methods: {

                 submit: function(){

                     this.myData.push({

                         name: this.user,

                         pass: this.pass

                     })

                     this.user="";

                     this.pass="";

                 },

                 allDel: function(){

                     this.myData=[];

                 },

                 delLine: function(index){

                     this.myData.splice(index,1);

                 }

             }

         })

     }

 </script>

vue-留言板-bootstrap的更多相关文章

  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. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

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

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

  6. Bootstrap留言板界面练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 【weiphp微信开发教程】留言板插件开发详解

    基于weiphp框架的留言板插件教程: 1.功能分析 传统的留言板应该具有发布留言.查看留言.回复留言.管理留言等功能,本教程开发的是最基本的留言板,仅包含发布留言和查看留言两个功能,根据功能用boo ...

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

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

  9. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

随机推荐

  1. Layui 行点击追加元素效果

    /** * 单击事件 * @param obj */var dom;var state;WarningIllegalIntime.onRowClick=function(obj) { console. ...

  2. Socket编程（day14）

    一.基于TCP传输层的编程模型 TCP是面向连接的,安全可靠的. 三次握手 服务器端编程模型 .创建一个用于网络通讯的设备 通讯端点 socket() #include <sys/types.h ...

  3. rsync增量同步标志位详细解释

    rsync非常强大,下面是我用rsync做目录备份时用到的参数: rsync -ruPi -plEt /home/op/photo/ /remote_backup/photo/ --dry-run - ...

  4. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  5. CentOS 7 x64下Apache+MySQL(Mariadb)+PHP5.6的安装

    每次搭建新服务器,都要来来回回把这些包再装一下,来来回回搞了不下20遍了吧,原来都是凭经验,配置过程中重复入坑是难免的,故写此文做个备忘.虽然有像xampp这样的集成包,但是在生产环境的Linux发行 ...

  6. ELK之Logstash配置文件详解

    Logstash 是一个开源的数据收集引擎,它具有备实时数据传输能力.它可以统一过滤来自不同源的数据,并按照开发者的制定的规范输出到目的地.它以插件的形式来组织功能,通过配置文件来描述需要插件做什么, ...

  7. mysql 的load data infile

    LOAD DATA INFILE语句从一个文本文件中以很高的速度读入一个表中.如果指定LOCAL关键词,从客户主机读文件.如果LOCAL没指定,文件必须位于服务器上.(LOCAL在MySQL3.22. ...

  8. [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉

    本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉 题目大意 给定n,m,求在1到n!内与m!互质的 ...

  9. 百度之星2014资格赛 1004 - Labyrinth

    先上题目: Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. 0208MySQL5.7之Group Replication

    转自http://blog.itpub.net/29510932/viewspace-2055679/ MySQL Group Replication: Hello World! 对测试版(on la ...