<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var vm=new Vue({
el:'.container',
data:{
arr:[],
username:'',
age:'',
nowIndex:100,
},
methods:{
add:function(){
this.arr.push({
name:this.username,
age:this.age
});
this.username='',
this.ge=''
},
delmsg:function(n){
this.arr.splice(n,1)
}
}
});
}
</script>
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control"id="username"
v-model="username" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="text" class="form-control"id="age"
v-model="age" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-sm" v-on:click="add()">添加</button>
<button type="reset" class="btn btn-danger btn-sm">重置</button>
</div>
</form>
<hr/>
<table role="table" class="table table-bordered table-hover">
<tr class="text-center">
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-danger btn-sm" data-toggle="modal"
data-target="#layer" v-on:click="nowIndex=index">删除</button></td>
</tr>
<tr v-show="arr.length==0">
<td colspan="4" class="text-center">暂无数据</td>
</tr>
</table>
<!-- 模态框 -->
<div role="dialog" class="modal fade" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<div class="modal-title">确定要删除么?</div>
</div>
<div class="modal-body text-right">
<button type="button" class="btn btn-primary btn-sm"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger btn-sm"
data-dismiss="modal" v-on:click="delmsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这里选中一行,进行删除,只是把当前的索引传递过来,传递到模态窗,模态窗的确认按钮,实现删除,把传递过来的索引传递到事件中,this.arr.splice(n,1)进行删除,切记,需要引入Jquery的js和bootstrap.js,这样模态窗的功能轻松实现