基於Vue的學生信息錄入系統(含增刪功能)

本文轉載自查看原文 2018-11-28 21:33 626 Vue

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 學生信息錄入系統 python編寫學生信息管理系統的增刪改查功能 Vue SSM搭建一個簡單的Demo前后端分離含增刪改查(CRUD)、分頁、批量功能用基本數據結構修改后的學生信息管理系統（增刪改查） Java用戶名登錄學生信息管理系統並對其進行增刪改查操作 ASP.NET Core 打造一個簡單的圖書館管理系統（九）學生信息增刪（終章）一個使用PHP實現，功能簡單的學生信息管理系統初學Java4：從鍵盤錄入學生信息(僅姓名和成績)並輸出 Spring Boot實現學生信息增刪改查學生管理系統（1：添加學生信息界面）