2018-09-12
2018-09-15 本文已影响0人
月薪2k的前端程序员
添加用户
这是根据v-model绑定数据，v-for循环和v-on事件绑定做的一个添加用户的
截图如下!
9.12.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#itany{
text-align: center;
}
#inp{
margin-bottom: 30px;
}
table{
width: 800px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
.btn{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='itany'>
<h1>添加用户</h1>
<!-- v-model='list'-->
<div id="inp">
<h3>姓名</h3>
<input type="text" placeholder="请输入姓名" v-model=ars.name>
<h3>年龄</h3>
<input type="text" placeholder="请输入年龄" v-model=ars.age>
<h3>邮箱</h3>
<input type="text" placeholder="请输入邮箱" v-model=ars.ema>
</div>
<div class="btn">
<button v-on:click='add'>添加</button>
<button v-on:click='ade'>重置</button>
</div>
<hr/>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.ema}}</td>
<td><button v-on:click='delt(index)'>删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[
{num:1,name:'tom',age:18,ema:'tom@126.com'},
{num:2,name:'jack',age:19,ema:'jack@126.com'},
{num:3,name:'amy',age:20,ema:'amy@126.com'}
],
ars:{
num:'',name:'',age:'',ema:''
},
},
methods:{
add:function(){
this.arr.push(this.ars),
this.ars={
num:'',
name: ''
, age: ''
, ema: ''
}
},
ade:function(){
this.ars={
num:'',
name: ''
, age: ''
, ema: ''
}
},
delt:function(index){
this.arr.splice(index,1);
}
}
})
</script>
</body>
</html>
