vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)

更新時間：2022年02月11日 11:20:45 作者：Annaluo

本文主要介紹了vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、功能描述：

1，對于輸入的內(nèi)容進行簡單的判斷。

2，實現(xiàn)簡單的增加和刪除功能。

二、運行情況

圖1 頁面初始化情況

點擊"添加新用戶"如下：

圖2：添加一個新用戶

圖3：刪除Anna和張三兩個用戶

全部代碼如下所示：（直接復(fù)制到一個.html文件即可成功運行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-VUE的常用指令-綜合練習(xí)</title>
    <style>
        #app {margin: 50px auto; width: 600px;}
        fieldset {border: 1px solid orangered;margin-bottom:20px;}
        fieldset input{width: 200px; height: 30px; margin: 10px 0;}
        table{width: 600px;border: 2px solid orangered; text-align: center;}
        thead{background-color: orangered;}
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一部分 -->
        <fieldset>
            <legend>學(xué)生錄入系統(tǒng)</legend>
            <div>
                <span>姓名：</span>
                <input type="text" placeholder="請輸入姓名" v-model="newStudent.name">
            </div>
            <div>
                <span>年齡：</span>
                <input type="text" placeholder="請輸入年齡" v-model="newStudent.age">
            </div>
            <div>
                <span>性別：</span>
                <select v-model="newStudent.sex">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
            
            <div>
                <span>手機：</span>
                <input type="text" placeholder="請輸入手機號" v-model="newStudent.phone">
            </div>
            <div>
                <button @click="createNewStu()">添加新用戶</button>
            </div>
        </fieldset>
        <!-- 第二部分 -->
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性別</td>
                    <td>年齡</td>
                    <td>手機</td>
                    <td>刪除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(stu,index) in students" :key="index">
                    <td>{{stu.name}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.age}}</td>
                    <td>{{stu.phone}}</td>
                    <td>
                        <button @click="delStudent(index)"> 刪除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'張三',sex:'男',age:20,phone:'18722222'},
                    {name:'李四',sex:'女',age:10,phone:'18733333'},
                    {name:'王五',sex:'女',age:24,phone:'18744444'},
                    {name:'趙六',sex:'男',age:25,phone:'18755555'}
                ],
                newStudent:{name:'',sex:'男',sge:'0',phone:''}
            },
            methods:{
                //插入記錄
                createNewStu(){
                    //1,姓名不能為空
                    if(this.newStudent.name === ''){
                        alert('姓名不能為空');
                        return;
                    }
 
                    //2,驗證年齡
                    if(this.newStudent.age <= 0){
                        alert('請輸入正確的年齡');
                        return;
                    }
                    //3,驗證手機號
                    if(this.newStudent.phone ===''){
                        alert('請輸入正確的手機號');
                        return;
                    }
 
                    //4,插入新紀錄
                    this.students.unshift(this.newStudent);
 
                    //5,清除記錄
                    this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
                },
                delStudent(index){
                    this.students.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>

相關(guān)JS代碼如下：

<script>
        new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'張三',sex:'男',age:20,phone:'18722222'},
                    {name:'李四',sex:'女',age:10,phone:'18733333'},
                    {name:'王五',sex:'女',age:24,phone:'18744444'},
                    {name:'趙六',sex:'男',age:25,phone:'18755555'}
                ],
                newStudent:{name:'',sex:'男',sge:'0',phone:''}
            },
            methods:{
                //插入記錄
                createNewStu(){
                    //1,姓名不能為空
                    if(this.newStudent.name === ''){
                        alert('姓名不能為空');
                        return;
                    }
 
                    //2,驗證年齡
                    if(this.newStudent.age <= 0){
                        alert('請輸入正確的年齡');
                        return;
                    }
                    //3,驗證手機號
                    if(this.newStudent.phone ===''){
                        alert('請輸入正確的手機號');
                        return;
                    }
 
                    //4,插入新紀錄
                    this.students.unshift(this.newStudent);
 
                    //5,清除記錄
                    this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
                },
                delStudent(index){
                    this.students.splice(index,1);
                }
            }
        });
    </script>

到此這篇關(guān)于vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)的文章就介紹到這了,更多相關(guān)vue 學(xué)生錄入系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: