需要自己吧vue这个文件引入，可以从bootcdn中导入
还需要把bootstrap这个文件的css导入
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<script src="lib/vue.js"></script>
</head>
<body>
<div id="out" v-bind:style="{width:wit,margin:mar}">
<h2 style="font-weight: bold;">信息管理系统</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">姓名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" v-model="ipt1">
</div>
<div class="form-group">
<label for="exampleInputPassword1">年龄</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" v-model="ipt2">
</div>
<div class="form-group">
<label for="exampleInputPassword1">职位</label>
<select class="form-control" v-model="ipt3">
<option>web工程师</option>
<option>java工程师</option>
<option>php工程师</option>
<option>全栈工程师</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputPassword1">性别</label>
</div>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" v-model="ipt4" value="男"> 男
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" v-model="ipt4" value="女"> 女
</label>
<br />
<button type="button" class="btn btn-success" style="margin-top: 10px;" @click="btn1()">添加</button>
<button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn2()">重置</button>
</form>
<h4 style="color: springgreen;font-weight:bold ;margin-top: 50px;">用户信息表</h4>
<table class="table table-bordered" >
<tr style="text-align: center;color:red;font-weight: bold;">
<td>序号</td>
<td>姓名</td>
<td>信息</td>
<td>操作</td>
<td>操作</td>
</tr>
<tr style="text-align: center;" v-for="(item,i) in arr">
<td>{{i+1}}</td>
<td >{{item[0]}}</td>
<td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn3(i)">查看</button></td>
<td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn4(i)">删除</button></td>
<td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn5(i)">修改</button></td>
</tr>
</table>
<div id="footer" style="width: 40%;height:300px;position: absolute;top: 50px;left: 30%;background: pink;text-align: center;" v-bind:style="{display:dis}">
<h3>个人信息</h3>
<table class="table table-bordered" style="width: 80%;margin: auto;">
<tr style="color:red;font-weight: bold;">
<td style="width: 50%;">姓名</td>
<td>{{ico1}}</td>
</tr>
<tr style="color:red;font-weight: bold;">
<td>年龄</td>
<td>{{ico2}}</td>
</tr>
<tr style="color:red;font-weight: bold;">
<td>性别</td>
<td>{{ico3}}</td>
</tr>
<tr style="color:red;font-weight: bold;">
<td>职业</td>
<td>{{ico4}}</td>
</tr>
</table>
<button type="button" class="btn btn-success" style="float: right;margin: 20px;margin-right: 60px;" @click="btn6()">关闭</button>
<button type="button" class="btn btn-danger" style="float: right;margin: 20px;" @click="btn6()">确定</button>
</div>
</div>
<script>
var vm = new Vue({
el:"#out",
data:{
wit:'80%',
mar:"0 auto",
dis:"none",
dis1:"none",
ipt1:"",
ipt2:"",
ipt3:"",
ipt4:"",
ipt5:"",
ipt6:"",
ipt7:"",
ipt8:"",
arr:[],
ico1:"",
ico2:"",
ico3:"",
ico4:""
},
methods:{
btn1(){
this.arr.push([this.ipt1,this.ipt2,this.ipt3,this.ipt4])
this.ipt1=""
this.ipt2=""
this.ipt3=""
this.ipt4=""
},
btn2(){
this.arr=""
},
btn3(i){
this.dis = "block"
this.ico1=this.arr[i][0]
this.ico2=this.arr[i][1]
this.ico3=this.arr[i][2]
this.ico4=this.arr[i][3]
},
btn4(i){
this.arr.splice(i,1)
},
btn5(i){
var name = prompt("请输入修改后的名字");
var age = prompt("请输入修改后的年龄");
var work = prompt("请输入修改后的职业");
var sex = prompt("请输入修改后的性别");
this.arr.splice(i,1,[name,age,work,sex])
},
btn6(){
this.dis="none"
}
}
})
</script>
</body>
</html>