Day12
利用Bootstrap框架与Vue框架完成一个简单的人员查删增
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="../jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../vue/vue.js"></script>
</head>
<body >
<!-- 按钮触发模态框 -->
<div id="app" class="center-block" style="width: 80%">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">一个学院管理教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">学员管理</a></li>
<li><a href="#">教师管理</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
其他管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">其他1</a></li>
<li><a href="#">其他2</a></li>
<li><a href="#">其他2</a></li>
<li class="divider"></li>
</li>
</ul>
</div>
</div>
</nav>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加用户
</h4>
</div>
<div class="modal-body">
<div class="text-center">
姓名：<input type="text" v-model="username"><br>
性别：<input type="text" v-model="sex"><br>
班级：<input type="text" v-model="banji"><br>
学院：<input type="text" v-model="xueyuan"><br>
<button type="button" class="btn btn-primary" v-on:click="add">新增用户 </button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>姓名 <input type="text" v-model="searchName"></td>
<td>性别</td>
<td>班级</td>
<td>学院</td>
<td>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
添加
</button>
</td>
</tr>
</thead>
<tbody id="tbody">
<tr v-for="(user , index) in search()">
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.banji}}</td>
<td>{{user.xueyuan}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
username:'',
sex:'',
searchName:'',
users:[
{name:'罗小黑',sex:'男',banji:'1711',xueyuan:'电子信息'},
{name:'罗中黑',sex:'男',banji:'1711',xueyuan:'电子信息'},
{name:'罗中黑',sex:'男',banji:'1722',xueyuan:'电子信息'},
{name:'沐王蓉',sex:'女',banji:'1711',xueyuan:'电子信息'},
{name:'小智',sex:'男',banji:'1722',xueyuan:'电子信息'},
],
},
methods:{
add(){
user={
name:this.username,
sex:this.sex,
}
this.users.push(user);
},
del(index){
this.users.splice(index,1);
},
search(){
var resultArray= this.users.filter((user)=> {
// var flag = user.name.includes(this.searchName);
var flag = Object.values(user).join('').includes(this.searchName);
return flag;
})
return resultArray;
}
}
})
</script>
</body>
</html>
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
