<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>学生管理系统</title>
<link href="../public/css/bootstrap.min.css" rel="stylesheet">
<link href="../public/css/style.css" rel="stylesheet">
<style>
.row>div {
border: 1px solid #000;
}
.modal {
display: block;
opacity: 1;
top: 100px;
overflow: visible;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<table class="table table-striped">
<caption>学生管理系统v1.0-展示学生</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="item,index in arr" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td>
<button @click="tanchu(index)" class="btn btn-danger btn-xs" data-toggle="modal"
data-target="#exampleModal" data-whatever="@mdo">删除</button>
</td>
</tr>
</table>
<hr>
<hr>
<hr>
<form action="">
<table class="table table-striped">
<caption>添加学生信息</caption>
<tr>
<td>项目</td>
<td>信息</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" class="form-control" v-model="stuname" id="stuname" placeholder="姓名"
name="stuname">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text" class="form-control" v-model="stuage" id="stuage" placeholder="年龄"
name="stuage">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<label class="gen-span"><input type="radio" class="radio-info" v-model="gender" value="男">
男</label>
<label class="gen-span"><input type="radio" class="radio-info" v-model="gender" value="女">
女</label>
<label class="gen-span"><input type="radio" class="radio-info" v-model="gender" value="保密">
保密</label>
</td>
</tr>
</table>
<div style="text-align: center;"><input @click="comfirm" type="button"
class="btn btn-info btn-sm add-btn" value="确定增加" /></div>
</form>
</div>
<!-- 删除按钮确认框 :style="{display:item.bool?'block':'none'}" v-if="item.bool"-->
<div v-for="item,index in arr" :key="index" v-if="item.bool" class="modal fade" id="exampleModal" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button @click="item.bool=!item.bool" type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">确认框</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="message-text" class="control-label">确定要删除<strong class="control-label-name"
style="color:blue">{{item.name}}</strong>吗？</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
@click="item.bool=!item.bool">返回</button>
<a href="###" class="delete-a"><button @click="del(index)" type="button"
class="btn btn-primary">确认</button></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
arr: [
{ name: '小明', age: 12, gender: "男", bool: false },
{ name: '小红', age: 10, gender: "女", bool: false },
{ name: '小刚', age: 16, gender: "保密", bool: false }
],
gender: '男',
stuname: '',
stuage: ''
},
methods: {
//删除
del(i) {
this.arr.splice(i, 1);
},
// 弹出
tanchu(i) {
this.arr[i].bool = !this.arr[i].bool;
},
//添加确认
comfirm() {
//获取值
if (this.stuname.trim() && this.stuage.trim()) {
this.arr.push(
{ name: this.stuname.trim(), age: this.stuage.trim(), gender: this.gender, bool: false }
)
//清空
this.stuname = ''
this.stuage = ''
this.gender = '男'
} else {
//清空
this.stuname = ''
this.stuage = ''
this.gender = '男'
alert("请正确输入")
}
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号