<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>阿波罗学生信息录入系统</legend>
        <div>
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入学生姓名" v-model="newPerson.name">
        </div>
        <div>
            <label for="age">年龄</label>
            <input type="text" id="age" placeholder="请输入学生年龄" v-model="newPerson.age">
        </div>
        <div>
            <label for="gender">性别</label>
            <select name="" id="gender" v-model="newPerson.gender">
                <option value="female" selected>female</option>
                <option value="male">male</option>

            </select>
        </div>
        <div>
            <label for="tel">手机</label>
            <input type="text" id="tel" placeholder="请输入学生手机" v-model="newPerson.tel">
        </div>
        <div>
            <button @click="createNewPerson">创建学生信息</button>
        </div>
    </fieldset>

<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>手机</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(p, index) in persons">
        <td>{{ p.name }}</td>
        <td>{{ p.gender }}</td>
        <td>{{ p.age }}</td>
        <td>{{ p.tel }}</td>
        <td>
            <button @click="delPerson(index)">删除</button>
        </td>
    </tr>
    </tbody>
</table>

</div>



<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            persons: [
                {name: 'Apollo', age: 28, gender: 'male', tel: '15618661616'},
                {name: 'Apollo', age: 28, gender: 'male', tel: '15618661616'},
                {name: 'Apollo', age: 28, gender: 'male', tel: '15618661616'},
                {name: 'Apollo', age: 28, gender: 'male', tel: '15618661616'}
            ],
            newPerson: {
                name: '',
                age: 18,
                gender: 'female',
                tel: '15618661616'
            }
        },
        methods: {
            createNewPerson: function () {
                // 验证
                if (this.newPerson.name == '') {
                    alert('姓名不能为空');
                    return;
                }
                // 插入
                this.persons.push(this.newPerson);
                // 清空
                this.newPerson = {
                    name: '',
                    age: 18,
                    gender: 'male',
                    tel: '15618661616'
                }
            },
            delPerson: function (index) {
                this.persons.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>