标签：stuname arr name 管理系统 gender isShow 学生 v1.1 stuage
<!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>
标签：stuname,arr,name,管理系统,gender,isShow,学生,v1.1,stuage 来源： https://www.cnblogs.com/Gawainehzh/p/15939047.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。