vue-留言板-bootstrap

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