<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/vue.js"></script>
<style>
*{
margin:0px;
padding:0px;
}
body{
font-family:微软雅黑;
}
#itany{
width:1200px;
margin:0 auto;
}
#itany h1{
text-align: center;
font-weight:normal;
font-size:34px;
margin-bottom:30px;
}
#itany .div{
height:80px;
}
#itany .div input{
width:1200px;
height:36px;
border: 0px;
border:1px solid darkgray;
border-radius:5px;
padding-left:20px;
margin-top:5px;
}
.btn{
text-align: center;
}
.btn button{
width:60px;
height:40px;
margin-right:5px;
border-radius:5px;
border:0;
color:white;
margin-top:10px;
}
.btn button:nth-child(1){
background:lightskyblue;
}
.btn button:nth-child(2){
background:mediumseagreen;
}
table{
width:1200px;
text-align: center;
}
.p{
width:1200px;
height:50px;
border-top:1px solid lightgray;
text-align: center;
margin-top:35px;
}
.p p{
font-size:14px;
margin-top: 20px;
}
.btnrmove{
width:70px;
height:30px;
}
</style>
</head>
<body>
<div id="itany">
<h1>添加用户</h1>
<div class="div">
<h4>姓名</h4>
<input type="text" placeholder="请输入姓名" v-model="arr1.name">
</div>
<div class="div">
<h4>年龄</h4>
<input type="text" placeholder="请输入年龄" v-model="arr1.age">
</div>
<div class="div">
<h4>邮箱</h4>
<input type="text" placeholder="请输入邮箱" v-model="arr1.email">
</div>
<div class="btn">
<button v-on:click="fun">添加</button>
<button v-on:click="fun3">重置</button>
</div>
<div class="p">
<p>用户列表</p>
</div>
<table border="1" cellspacing="0">
<thead>
<tr style="height:40px">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>邮箱</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arr" style="height:50px">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.email}}</td>
<td><button v-on:click="fun2(index)" class="btnrmove">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#itany",
data:{
arr1:{ },
arr:[
{
name:"tom",
age:18,
email:"tom@126.com",
btn:"删除"
},
{
name:"jack",
age:19,
email:"jack@126.com",
btn:"删除"
},
{
name:"amy",
age:20,
email:"amy@126.com",
btn:"删除"
}
]
},
methods:{
fun:function(){
this.arr.push(this.arr1),
this.arr1={}
},
fun2:function(ind){
this.arr.splice(ind,1)
},
fun3:function(){
window.location.href="作业1.html";
}
}
})
</script>
</body>
</html>
效果：
QQ截图20180917112919.png
网友评论