主要是对bootstrap和vue的基本用法进行一个练习，代码奉上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息管理系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#container{
padding: 0 100px;
}
h2,h5,label,h3{
font-weight: 700;
}
h3{
color: #3071A9;
}
.radio1{
background: #fff;
}
table{
text-align: center;
}
th{
text-align: center;
color: #A94442;
td{
color: #000;
}
</style>
</head>
<body>
<div class="out" id="container">
<h2>信息管理系统</h2>
<div>
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" placeholder="请输入姓名" v-model="name">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="aage">
</div>
<div class="form-group">
<label for="exampleInputFile">职位</label>
<select class="form-control" v-model="enginer">
<option>ios工程师</option>
<option>H5工程师</option>
<option>Java工程师</option>
<option>UI设计师</option>
</select>
</div>
<div class="checkbox">
<h5 >性别</h5>
男： <input v-model="sex" class="radio1" type="radio" name="sex" value="男">
女： <input v-model="sex" class="radio1" type="radio" name="sex" value="女">
</div>
<button class="btn btn-info" v-on:click="add($event)">添加</button>
<button class="btn btn-danger" @click="chongz($event)">重置</button>
</div>
<h3>用户信息表</h3>
<table class="table table-bordered">
<tr>
<th>序号</th>
<th>姓名</th>
<th>信息</th>
<th>操作</th>
<th>操作</th>
</tr>
<tr v-for="(item,i) in arr">
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" @click="chakan(i,item)">查看</button>
</td>
<td>
<button class="btn btn-danger" v-on:click="dele(i)">删除</button>
</td>
<td>
<button class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" @click="chakan(i,item)">修改</button>
</td>
</tr>
</table>
<!--查看的模态框-->
<div id="look">
<div 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">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">个人信息</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">姓名:</label>
<input type="text" class="form-control" id="recipient-name" v-model="n">
</div>
<div class="form-group">
<label for="recipient-name1" class="control-label">年龄:</label>
<input type="text" class="form-control" id="recipient-name1" v-model="a">
</div>
<div class="form-group">
<label for="recipient-name2" class="control-label">职位:</label>
<input type="text" class="form-control" id="recipient-name2" v-model="e">
</div>
<div class="form-group">
<label for="recipient-name3" class="control-label">性别：</label>
<input type="text" class="form-control" id="recipient-name3" v-model="s">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="xiugai()">确定</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el:".out",
data:{
name:"",
aage:"",
enginer:"",
sex:"",
arr:[],
n:"",
a:"",
e:"",
s:"",
index:""
},
methods:{
add(e){
this.arr.push({name:this.name,age:this.aage,enginer:this.enginer,sex:this.sex});
this.name="";
this.aage="";
this.enginer="";
this.sex=""
},
chongz(e){
this.name="";
this.aage="";
this.enginer="";
this.sex=""
},
dele(i){
this.arr.splice(i,1)
},
chakan(i,item){
// var index ="";
this.n=item.name;
this.a=item.age;
this.e=item.enginer;
this.s=item.sex;
// return index=i;
index=i
},
xiugai(){
// console.log(this.arr[index])
this.arr[index].name = this.n;
this.arr[index].age = this.a;
this.arr[index].enginer = this.e;
this.arr[index].sex = this.s;
// this.arr.splice(i,1,{name:item.name})
}
}
})
</script>
</body>
</html>
注：文件的话，可以去官网下载，也可以去bootcdn去引入一下。
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
