Vue實現簡易留言板

時間 2020-05-10
標籤 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。