第一節(jié)
<script type="text/javascript"src="vue.j/vue.js">
</script>
<style type="text/css">
input{
width: 100%;
height: 33px;
border-radius: 5px;
font-size: 8px;
}
p{
margin-top: 25px;
}
.box{
margin-top: 20px;
}
tr{
height:40px;
}
</style>
<body>
<div class="container" id="itany">
<h1 class="text-center">添加用戶</h1>
<p>姓名</p>
<input type="text" v-model="str" placeholder="請輸入姓名">
<p>年齡</p>
<input type="text" v-model="ben" placeholder="請輸入年齡">
<p>郵箱</p>
<input type="text" v-model="sen" placeholder="請輸入郵箱">
<div class="box text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<button class="btn btn-success" v-on:click="chong">重置</button>
</div>
<table border="" cellspacing="" cellpadding="" width="100%" style="text-align: center;">
<tr>
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
<td>郵箱</td>
<td>操作</td>
</tr>
<tr v-for='(v,index) in arr'>
<td>{{v.num}} </td>
<td>{{v.name}}</td>
<td>{{v.old}}</td>
<td>{{v.email}}</td>
<td><button v-on:click="the(index)">刪除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#itany',
data:{
arr:
[
{num:'1',name:'tom',old:'18',email:'tom@126.com'},
{num:'2',name:'jack',old:'19',email:'jack@126.com'},
{num:'3',name:'amy',old:'20',email:'amy@126.com'}
],
str:'',
ben:'',
sen:'',
},
methods:{
add:function(){
this.arr.push({num:this.arr.length+1,name:this.str,old:this.ben,email:this.sen})
},
the:function(ind){
this.arr.splice(ind,1)
},
}
})
</script>
