vue-留言板-bootstrap
最近看完入门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"> 密 码 </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>
<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的更多相关文章
- [js高手之路] vue系列教程 - 实现留言板todolist(3)
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...
- Vue之简易的留言板功能
今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例
## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express 项目名 --view=ejs 或express -e 项目名 ## ...
- vue+egg.js+mysql一个前后端分离留言板项目
一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...
- Bootstrap留言板界面练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【weiphp微信开发教程】留言板插件开发详解
基于weiphp框架的留言板插件教程: 1.功能分析 传统的留言板应该具有发布留言.查看留言.回复留言.管理留言等功能,本教程开发的是最基本的留言板,仅包含发布留言和查看留言两个功能,根据功能用boo ...
- 微信小程序实现简易留言板
微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...
- flask实战-留言板-Web程序开发流程
Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...
随机推荐
- 【转载】JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- S-HR远程调试
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- nyoj169-素数
ms | 内存限制:65535 KB 难度:1 描述 走进世博园某信息通信馆,参观者将获得前所未有的尖端互动体验,一场充满创想和喜悦的信息通信互动体验秀将以全新形式呈现,从观众踏入展馆的第一步起, ...
- node源码详解（三）
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...
- phpcms 电脑手机合并
电脑手机端 ========================== <script type="text/javascript"> function browserRed ...
- 解决ICS40上设置APN无权限问题
在ICS40以前的版本中,如果程序需要设置APN,只需要在AndroidManifest文件中声明<uses-permission android:name="android.perm ...
- D2007在win7下bordbk105N.dll 莫名其妙的问题。
已经装过一次win7下d2007.再装一次就出现许多莫名其妙的问题.其中之一: Windows 7 64bit Delphi Debugger Fix / Workaround 2013-08-28 ...
- 【Codeforces 639A】Bear and Displayed Friends
[链接] 我是链接,点我呀:) [题意] [题解] 时刻维护一下前K大的数字就好. 因为k<=6 然后数字不会减少只会增加. 因此只要维护一个大小为k的数组就ok. 保证这个数组是有序的. 写个 ...
- percona-xtradb-cluster安装部署
Percona Xtradb Cluster 安装 Percona Xtradb Cluster 介绍 Percona XtraDB Cluster 简称:PXC,是针对MySQL 用户的高可用性和扩 ...