<!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>
VUE.JS做的留言板
猜你喜欢
转载自blog.csdn.net/LanSeTianKong12/article/details/84524916
今日推荐
周排行