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

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

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

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

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

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.          <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
  7.          <script src="../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
  8.          <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  9.          <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  10.          <style type="text/css">
  11.              .inputPadding{
  12.                  width: 30%;
  13.                  margin: 0 auto;
  14.                  margin-top: 5%;
  15.              }
  16.              .input-group {
  17.                  margin: 0 auto;
  18.              }
  19.          </style>
  20.      </head>
  21.      <body>
  22.          <div id="box">
  23.              <div class="inputPadding">
  24.                  <div class="input-group">
  25.                      <span class="input-group-addon">用户名</span>
  26.                      <input type="text" class="form-control" placeholder="请输入用户名" v-model="user">
  27.                  </div>
  28.                  <br /><br />
  29.                  <div class="input-group">
  30.                      <span class="input-group-addon">&nbsp;密&nbsp;&nbsp;码&nbsp;</span>
  31.                      <input type="text" class="form-control" placeholder="请输入密码" v-model="pass">
  32.                  </div>
  33.                  <br /><br />
  34.                  <div class="input-group">
  35.                      <button type="button" class="btn btn-primary" @click="submit()"> 提 交 </button>
  36.                      &nbsp;&nbsp;&nbsp;&nbsp;
  37.                      <button type="reset" class="btn btn-warning"> 取 消 </button>
  38.                  </div>
  39.              </div>
  40.              <hr />
  41.              <table class="table table-striped text-center">
  42.                  <caption class="h3 text-center">数据列表</caption>
  43.                  <tr>
  44.                      <th class="text-center">序号</th>
  45.                      <th class="text-center">名字</th>
  46.                      <th class="text-center">密码</th>
  47.                      <th class="text-center">操作</th>
  48.                  </tr>
  49.                  <tr v-for="(item,index) in myData">
  50.                      <td>{{ index+1 }}</td>
  51.                      <td>{{ item.name }}</td>
  52.                      <td>{{ item.pass }}</td>
  53.                      <td>
  54.                          <button type="button" class="btn" data-toggle="modal" data-target="#myModal"  @click="delLine(index)">删除</button>
  55.                      </td>
  56.                  </tr>
  57.                  <tr v-show="myData.length!=0">
  58.                      <td colspan="4">
  59.                          <button type="button" class="btn" data-toggle="modal" data-target="#myModal" @click="allDel()">全部删除</button>
  60.                      </td>
  61.                  </tr>
  62.                  <tr v-show="myData.length==0">
  63.                      <td colspan="4">暂无数据</td>
  64.                  </tr>
  65.              </table>
  66.          </div>
  67.      </body>
  68.  </html>
  69.  <script type="text/javascript">
  70.      window.onload = function(){
  71.          new Vue({
  72.              el: '#box',
  73.              data: {
  74.                  user: '',
  75.                  pass: '',
  76.                  myData: [],
  77.                  nowIndex: -100
  78.              },
  79.              methods: {
  80.                  submit: function(){
  81.                      this.myData.push({
  82.                          name: this.user,
  83.                          pass: this.pass
  84.                      })
  85.                      this.user="";
  86.                      this.pass="";
  87.                  },
  88.                  allDel: function(){
  89.                      this.myData=[];
  90.                  },
  91.                  delLine: function(index){
  92.                      this.myData.splice(index,1);
  93.                  }
  94.              }
  95.          })
  96.      }
  97.  </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. day007 列表类型、元祖类型、 字典类型、 集合类型的内置方法

    目录 列表数据类型的内置方法 作用 定义方式 优先掌握的方法 需要掌握的方法 元祖类型的内置方法 作用 定义方式 优先掌握的方法(参考列表方法) 字典类型的内置方法 作用 定义方式 优先掌握的方法 需 ...

  2. day003 python解释器、变量和数据类型基础讲解

    Python解释器 打开官网https://www.python.org/downloads/windows/ 下载中心下载对应电脑版本的Python安装包,选择custom后一路next安装完成.过 ...

  3. javascript匿名函数及闭包深入理解及应用

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种: ...

  4. jsp 判断当前时间是否符合设置的时间条件

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

  5. Google Shell Style Guide

    转自:http://google.github.io/styleguide/shell.xml Shell Style Guide Revision 1.26 Paul Armstrong Too m ...

  6. 线程同步、信号量、system v IPC

    一.线程同步 条件变量 什么是条件变量? 线程A等待某个条件成立,条件成立,线程A才继续向下执行.线程B的执行使条件成立,条件成立以后唤醒线程A,以继续执行.这个条件就是条件变量. pthread_c ...

  7. 33.bulk json格式的理解

    bulk json格式的理解 一.常规格式 按常规理解,bulk中json格式可以是以下方式 [{ "action": { }, "data": { } }] ...

  8. Ubuntu下ss的安装与使用

    不得不说,linux真的有种让人用上就爱上的魔力,正好最近Ubuntu出了16.04,便索性装了个win10+Ubuntu的双系统,也算是告慰那永远留在老硬盘里的虚拟机吧. 言归正传,换上Ubuntu ...

  9. VS-诊断工具和智能跟踪

    MSDN文章

  10. 洛谷—— P2690 接苹果

    https://www.luogu.org/problem/show?pid=2690 题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵 ...