vue-留言板-bootstrap
2024-08-31 07:13:58
最近看完入门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>
最新文章
- [游戏学习28] MFC 时钟
- iOS上应用如何兼容32位系统和64位系统
- ubuntu14.04安装Docker
- Zookeeper、HBase的伪分布
- kafka web console安装
- 【HDU】5248-序列变换（贪心+二分）
- 从零开始学Axure原型设计（入门篇）
- Eclipse 版本选择
- SpringBoot整合SpringSecurity,SESSION 并发管理,同账号只允许登录一次
- ToolBar控件详解
- 关于appium-doctor运行时提示不是内部或外部的命令
- 把旧系统迁移到.Net Core 2.0 日记 (20) --使用MiniProfiler for .NET
- Baffle.js – 用于实现文本模糊效果的 JavaScript 库
- 基于Bootstrap表单验证
- vue 脚手架（一，创建脚手架）
- Java List详解，面试中应该如何解答关于List的问题
- React安装React Devtools调试工具
- vue当中设置全局变量的方法
- Comparison method violates its general contract! 异常原因
- h5的缓存机制