最近看完入門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>