使用Vue来制作简易的小例子（添加删除表）+bootstrap来做样式
展示图：
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简易留言板</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
<style>
</style>
<script type="text/javascript">
window.onload = function () {
new Vue({
el: "#box",
data: {
mydata: [],
username: "",
age: "",
nowIndex: -100,
zizi:"确认全部删除么？"
},
methods: {
add: function () {
this.mydata.push({
name: this.username,
age: this.age,
});
this.username = "";
this.age = "";
},
deletemsg:function(n){
if (n==-2)
{
this.mydata = [];
}
else
{
this.mydata.splice(n, 1);
}
},
}
})
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" class="form-control" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" id="age" v-model="age" class="form-control" placeholder="请输入年龄"/>
</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>
</form>
<hr />
<table class="table table-bordered table-hover">
<caption class="h3 text-info" >用户信息表</caption>
<tr class="text-danger">
<th class="text-center">
序号
</th>
<th class="text-center" >
名字
</th>
<th class="text-center">
年龄
</th>
<th class="text-center">
操作
</th>
</tr>
<tr class="text-center" v-for="item in mydata">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><input type="button" value="删除" v-on:click="nowIndex=$index" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"/></td>
</tr>
<tr v-show="mydata.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer">删除全部</button>
</td>
</tr>
<tr v-show="mydata.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据...........</p>
</td>
</tr>
</table>
<!--模态框 弹出框-->
<div role="dialog" class="modal fade" id="layer" data-index="{{nowIndex}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" id="title"> 确认删除么？</h4>
</div>
<div class="modal-body text-right">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button type="button" v-on:click="deletemsg(nowIndex)" class="btn btn-danger btn-sm" data-dismiss="modal">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>