版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/81951876
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="out" style="width: 1000px;margin: 0 auto;">
<h1>信息管理系统</h1>
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" placeholder="姓名" v-model="xingming">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="年龄" v-model="nianling">
</div>
<div class="form-group">
<label for="zhiwei">职位</label>
<select id="zhiwei" class="form-control" v-model="zhiwei">
<option value="ui设计师">ui设计师</option>
<option value="H5">H5</option>
<option value="java">jave</option>
<option value="php">php</option>
</select>
</div>
<div class="form-group">
<label>性别</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model="sex">男:
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女" v-model="sex">女:
</label>
</div>
<button type="button" class="btn btn-info" id="tianjia" @click="add()">添加</button>
<button type="button" class="btn btn-danger" @click="chongzhi()">重置</button>
<h3 style="color: cornflowerblue;">用户信息表</h3>
<table class="table table-bordered" >
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">信息</th>
<th class="text-center">操作</th>
<th class="text-center">操作</th>
</tr>
<tr v-for="(item,index) in list">
<td class="text-center">{{index}}</td>
<td class="text-center">{{item.names}}</td>
<td class="text-center">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" @click="chakan(index)">查看</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">用户信息</h4>
</div>
<div class="modal-body">
<p>姓名: {{xingming}}</p>
<p>年龄: {{nianling}}</p>
<p>职位: {{zhiwei}}</p>
<p>性别: {{sex}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
</td>
<td class="text-center">
<button type="button" class="btn btn-info" @click="shanchu(index)">删除</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalXiu" @click="xiugai(index)">修改</button>
<!-- Modal -->
<div class="modal fade" id="myModalXiu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">用户信息</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" placeholder="姓名" v-model="xingmingX">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="年龄" v-model="nianlingX">
</div>
<div class="form-group">
<label for="zhiwei">职位</label>
<select id="zhiwei" class="form-control" v-model="zhiweiX">
<option value="ui设计师">ui设计师</option>
<option value="H5">H5</option>
<option value="java">jave</option>
<option value="php">php</option>
</select>
</div>
<div class="form-group">
<label>性别</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model="sexX">男:
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女" v-model="sexX">女:
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click="gai()">确定</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#out",
data:{
xingming:"",
nianling:"",
zhiwei:"",
sex:"男",
list:[],
xingmingX:"",
nianlingX:"",
zhiweiX:"",
sexX:"男",
xiu:0
},
methods:{
add(){
var obj = {
names:this.xingming,
nianling:this.nianling,
zhiwei:this.zhiwei,
sex:this.sex
}
this.list.push(obj)
this.xingming=""
this.nianling=""
this.zhiwei=""
this.sex=""
},
shanchu(index){
this.list.splice(index,1)
},
chakan(index){
this.xingming=this.list[index].names;
this.nianling=this.list[index].nianling;
this.zhiwei=this.list[index].zhiwei
this.sex=this.list[index].sex
},
gai(){
this.list[this.xiu].names=this.xingmingX;
this.list[this.xiu].nianling=this.nianlingX;
this.list[this.xiu].zhiwei=this.zhiweiX
this.list[this.xiu].sex=this.sexX
},
chongzhi(){
this.names="";
this.nianling="";
this.zhiwei=""
this.sex=""
},
xiugai(index){
this.xingmingX=this.list[index].names
this.nianlingX=this.list[index].nianling;
this.zhiweiX=this.list[index].zhiwei;
this.sexX=this.list[index].sex;
this.xiu = index
}
}
})
</script>
</body>
</html>
