<div class="container">
        <form action="">
            <div class='form-group'>
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" class="form-control" v-model="nulls.name">
            </div>
            <div class='form-group'>
                <label>年龄：</label>
                <input type="text" placeholder="请输入年龄" class="form-control" v-model="nulls.age">
            </div>
            <div class='form-group'>
                <label>邮箱：</label>
                <input type="text" placeholder="请输入邮箱" class="form-control" v-model="nulls.mail">
            </div>
        </form>
        <button class="btn btn-success" @click="add">添加</button>
        <button class="btn btn-info" @click="news">重置</button>
        <table class="table table-bordered text-center">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in message">
                    <td>{{index+1}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.age}}</td>
                    <td>{{value.mail}}</td>
                    <td><button @click="splice(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".container",
            data:{
                message:[
                    {name:"Danny",age:"18",mail:"123@qq.com"},
                    {name:"Jenny",age:"18",mail:"134@qq.com"},
                    {name:"Tom",age:"18",mail:"172@qq.com"}
                ],
                nulls:{name:"",age:"",mail:""}
            },
            methods:{
                add:function(){
                    this.message.push(this.nulls);
                    this.nulls={}
                },
                splice:function(ind){
                    this.message.splice(ind,1)
                },
                news:function(){
                    this.message={}
                }
            }
        })
    </script>