<!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">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<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="del(index,item.name)" 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" id="stuname" placeholder="姓名" v-model="stuname">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="number" class="form-control" id="stuage" placeholder="年龄" v-model="stuage">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<label class="gen-span"><input type="radio" class="radio-info" v-model="gender" checked
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="add" type="button" class="btn btn-info btn-sm add-btn"
value="确定增加" /></div>
</form>
</div>
<!-- :style="{display:isShow?'block':'none'}" -->
<!-- 删除按钮确认框 v-if 和 v-show 要保持 盒子block状态所以为闪现一下 -->
<div v-show="isShow" 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 type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true" @click="isShow=!isShow">×</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">{{arrName}}</strong>吗？</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
@click="isShow=!isShow">返回</button>
<a href="###" class="delete-a"><button type="button" class="btn btn-primary"
@click="realDel(arrIndex)">确认</button></a>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
//显示隐藏模态框
isShow: false,
//渲染列表
arr: [
{ name: '小明', age: 12, gender: "男" },
{ name: '小红', age: 10, gender: "女" },
{ name: '小刚', age: 16, gender: "保密" }
],
//姓名
stuname: '',
//年龄
stuage: '',
//性别
gender: '男',
//数组名字
arrName: '',
//数组下标
arrIndex: ''
},
created() {
console.log('加载');
//获取存储的数据
this.arr = JSON.parse(localStorage.getItem('arr'))
},
methods: {
//添加人员
add() {
//判断是否为空
if (!this.stuname.trim() || !this.stuage.trim()) {
alert('请输入正确的数据')
//重置
this.stuage = '';
this.stuname = '';
this.gender = "男"
return
}
//添加数据
this.arr.push({
name: this.stuname.trim(),
age: this.stuage.trim(),
gender: this.gender
})
//重置
this.stuage = '';
this.stuname = '';
this.gender = "男";
//数据存储到本地
localStorage.setItem('arr', JSON.stringify(this.arr));
},
//删除键弹出层
del(i, name) {
this.isShow = !this.isShow;
this.arrName = name
this.arrIndex = i
},
//确认删除
realDel(i) {
this.arr.splice(i, 1);
this.isShow = !this.isShow;
//数据存储到本地
localStorage.setItem('arr', JSON.stringify(this.arr));
}
}
})
</script>
</body>
</html>