vue 表单添加

form{
            width: 400px;
            height: 200px;
            border: 1px solid;
            background-color: aquamarine;
            padding: 20px;
        }
        table{
            margin-top: 20px;
            width: 400px;
            border: 1px solid;
           background-color: cyan;
        }
        tr{
            text-align: center;
        }
        th{
            border: 1px solid;
        }
        td{
            border: 1px solid;
            background-color: darkorange;
        }

<div id="app">
        <form>
            <p style="font-size: 20px;">
                信息调查
            </p>
            <p>
                姓名:<input type="text" placeholder="请输入姓名" v-model="newPerson.name">
            </p>
            <p>
                年龄:<input type="text" value="0" v-model="newPerson.age">
            </p>
            <p>
                性别:<select v-model="newPerson.sex">
                <option >男</option> 
                <option>女</option>
            </select>
            </p>
            <button type="button" @click="chuang">创建新用户</button> &nbsp; <span style="font-size: 12px;color: red;">{{tishi}}</span>
        </form>
        <table>
            <tr id="tr1" style="background-color:chartreuse">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>删除</th>
            </tr>
            <tr v-for="item in people">  
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td><button @click="shanchu(index)">删除</button></td>
            </tr>
        </table>
    </div>

 var app = new Vue({
        el:"#app", 
        data:{
            tishi:"",
            newPerson:{
                name:"",
                sex:"男",
                age:"",
            },
            people:[{
                name:"张三",
                sex:"男",
                age:"25",
            }]
        },
        methods:{
            
            chuang: function(){

                if (this.newPerson.name == "") {
                    this.tishi = "用户名不能为空！";
                    return;
                }
                if (this.newPerson.age == "") {
                    this.tishi = "用户年龄不能为空！";
                    return;
                }
                //console.log(this);
                this.people.push(this.newPerson);
                this.newPerson = {name: '', age: '', sex: '男',tel:""};
                this.tishi = "";
            },
            shanchu: function(index){  
                this.people.splice(index,1); 
            }
        }
    });