最近看完入门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"> 密 码 </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 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>