1. 程式人生 > >VUE.JS做的留言板

VUE.JS做的留言板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div class="container" id="app">
<form role="form" >
<div class="form-group">
<label for="username">使用者名稱</label>
<input class="form-control" type="text" placeholder="請輸入姓名" id="username" v-model="username"/>
</div>
<div class="form-group">
<label for="age">年齡</label>
<input class="form-control" type="text" placeholder="請輸入年齡" id="age" v-model="age"/>
</div>

<div class="form-group">
<input type="button" value="新增" class="btn btn-primary" v-on:click="add()"/>
<input type="reset" value="重置" class="btn btn-danger" />
</div>

<table class="table table-bordered table-hover">
<caption class="h2 text-center">使用者資訊表</caption>

<thead>
<tr>
<th class="text-center">序號</th>
<th class="text-center">姓名</th>
<th class="text-center">年齡</th>
<th class="text-center">操作</th>
</tr>

</thead>
 <tbody >
  <tr class="text-center" v-for="item in list">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
               <td ><input type="button" value="刪除" class="btn btn-danger"id="show" v-on:click="sh()"></td>
  
  </tr>
  <tr > 
  <td colspan="4" class="text-right text-muted" v-show="list.length!=0">
  <input type="button" value="全部刪除" class="btn btn-danger"  v-on:click="removall()"/>
  </td>
  
  </tr>
  <tr>
  <td colspan="4" class="text-center text-muted" v-show="list.length==0">
  <p>暫時沒有資料...........</p>
  </td>
  
  </tr>
 </tbody>

</table>

</form>
<div class="modal" id="modal-1">


<div class="modal-dialog">


<div class="modal-content">


<div class="modal-header">

<h3 class="modal-title">刪除</h3>
</div>


<div class="modal-body">
<div>確認要刪除嗎?</div>

</div>


<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="upHide()">關閉</button>
<button class="btn btn-success" v-on:click="upHide()" type="submit">確定</button>
</div>


</div>


</div>


</div>

</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

<script>
window.onload=function(){
new Vue({
el:"#app",
data:{
list:[],
username:"",
age:""

},
methods:{
add:function(){
this.list.push({
name:this.username,
                            age:this.age
})
this.username="";
this.age="";

},
sh:function(){
$("#modal-1").show();

},
upHide:function($index){
$("#modal-1").hide();
this.list.splice($index,1)

},
removall:function(){
this.list=[];
}

}


});
};
</script>
</body>
</html>