<header>
        <h1>添加列表</h1>
    </header>
    <div id="itany">
        <div>
            <h4>姓名</h4>
            <input type="text" placeholder="请输入姓名" v-model="add.name">
        </div>
        <div>
            <h4>年龄</h4>
            <input type="text" placeholder="请输入年龄" v-model="add.age">
        </div>
        <div>
            <h4>邮箱</h4>
            <input type="text" placeholder="请输入邮箱" v-model="add.em">
        </div>
        <div class="btn">
            <button v-on:click="aaa">添加</button>
            <a href=""><button>重置</button></a>
        </div>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(val,index) in arr">
                    <td>{{index+1}}</td>
                    <td>{{val.name}}</td>
                    <td>{{val.age}}</td>
                    <td>{{val.em}}</td>
                    <td> <button v-on:click="splice(index)">删除</button> </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el:"#itany",
            data:{
               arr:[
                   {name:"tom",age:"18",em:"tom@123"},
                   {name:"mike",age:"19",em:"mike@132"},
                   {name:"tony",age:"20",em:"tony@123"}
               ],
                add:{name:"",age:"",em:""}

            },
            methods:{
                aaa:function(){
                    this.arr.push(this.add)
                    this.add={}
                },
                splice:function(index){
                    this.arr.splice(index,1)
                }
            }
        })
    </script>