删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理模块</title>
<script src="vue.js"></script>
<style type="text/css">
tr:hover{
background-color: #eee
}
.selInput{
display: inline-block;
width: 13px;
height: 13px;
border: 1px solid #ccc;
position: relative;
}
.select:after{
content: '√';
position: relative;
top: -4px;
}
</style>
</head>
<body>
<div id="app">
<h2>学生信息管理系统</h2>
<hr>
<table cellspacing='0'>
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for='item in students' @click='item.select = !item.select'>
<td :class='item.select?"select":""' class='selInput'></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</table>
<div>
<button>添加</button>
<button>修改</button>
<button @click='deleteHandler'>删除</button>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
methods:{
deleteHandler:function(){
for(let i=0; i<this.students.length; i++){
if(this.students[i].select){
this.students.splice(i,1)
i--
}
}
}
},
data() {
return {
students:[
{id:1,name:'aaa',age:1,gender:'男',select: false},
{id:2,name:'bbb',age:2,gender:'男',select: false},
{id:3,name:'ccc',age:3,gender:'男',select: false},
{id:4,name:'ddd',age:4,gender:'男',select: false},
{id:5,name:'eee',age:5,gender:'男',select: false},
{id:6,name:'fff',age:6,gender:'男',select: false},
{id:7,name:'ggg',age:7,gender:'男',select: false},
{id:8,name:'hh',age:8,gender:'男',select: false}
]
}
}
});
</script>
</body>
</html>
