Vue实现简易留言板

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>Vue实现简易留言板</title>
  6 <link rel="stylesheet" type="text/css" href="bootstrap.css">
  7 <script src="jquery.js"></script>
  8 <script src="bootstrap.js"></script>
  9 <script src="vue.js"></script>
 10 <style type="text/css">
 11   *{
 12      margin:0;
 13      padding:0;
 14   }
 15 </style>
 16 </head>
 17 <body>
 18  <div class="container" id="box">
 19    <form role="form">
 20       <div class="form-group">
 21         <label for="username">用户名:</label>
 22         <input type="text" id="username" class="form-control" v-model="username" placeholder="请输入用户名"> 
 23       </div>
 24       <div class="form-group">
 25         <label for="age">年 龄:</label>
 26         <input type="text" id="age" class="form-control" v-model="age" placeholder="请输入年龄">
 27       </div>
 28       <div class="form-group">
 29         <input type="button" value="添加" class="btn btn-primary" @click="add()">
 30         <input type="reset" value="重置" class="btn btn-danger">
 31       </div>
 32    </form>
 33    <hr>
 34    <table class="table table-bordered table-hover">
 35      <caption class="h2 text-info text-center">用户信息表</caption>
 36      <tr>
 37         <th class="text-center">序号</th>
 38         <th class="text-center">名字</th>
 39         <th class="text-center">年龄</th>
 40         <th class="text-center">操作</th>
 41      </tr>
 42      <tr class="text-center" v-for="(item,index) in myDate">
 43         <td>{{ index + 1 }}</td>
 44         <td>{{item.name}}</td>
 45         <td>{{item.age}}</td>
 46         <td>
 47           <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex = index">删除</button>
 48         </td>
 49      </tr>
 50      <tr v-show="myDate.length!=0">
 51        <td colspan="4" class="text-right">
 52          <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button>
 53        </td>
 54      </tr>
 55      <tr v-show="myDate.length==0">
 56        <td colspan="4" class="text-center text-muted">
 57          <p>暂无数据....</p>
 58        </td>
 59      </tr>
 60    </table>
 61    <!--模态框 弹出框-->
 62    <div role="dialog" class="modal fade" id="layer">
 63      <div class="modal-dialog">
 64        <div class="modal-content">
 65          <div class="modal-header">
 66            <button type="button" class="close" data-dismiss="modal">
 67              <span>&times;</span>
 68            </button>
 69            <h4 class="modal-title" v-if="nowIndex!=-2">确认删除么？</h4>
 70            <h4 class="modal-title" v-if="nowIndex==-2">确认全部删除吗</h4>
 71          </div>
 72          <div class="modal-body text-right">
 73            <button data-dismiss="modal" class="btn btn-primary btn-sam">取消</button>
 74            <button data-dismiss="modal" class="btn btn-danger btn-sam" @click="deleteMsg(nowIndex)">确认</button>
 75          </div>
 76        </div>
 77      </div>
 78    </div>
 79  </div>
 80  <script>
 81    new Vue({
 82      el:"#box",
 83      data:{
 84        myDate:[],
 85        username:'',
 86        age:'',
 87        nowIndex:-999
 88      },
 89      methods:{
 90        add:function(){
 91          this.myDate.push({
 92            name:this.username,
 93            age:this.age
 94          }),
 95          this.username="";
 96          this.age=""
 97        },
 98        deleteMsg:function(n){
 99          if(n==-2) {
100            this.myDate=[];
101          }else{
102            this.myDate.splice(n,1);
103          }
104        
105        }
106      }
107          
108    })
109  </script>
110 </body>
111 </html>