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

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

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

一、功能描述：

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

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

二、運(yùn)行情況

圖1 頁(yè)面初始化情況

點(diǎn)擊"添加新用戶(hù)"如下：

圖2：添加一個(gè)新用戶(hù)

圖3：刪除Anna和張三兩個(gè)用戶(hù)

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

<!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="請(qǐng)輸入姓名" v-model="newStudent.name">
            </div>
            <div>
                <span>年齡：</span>
                <input type="text" placeholder="請(qǐng)輸入年齡" v-model="newStudent.age">
            </div>
            <div>
                <span>性別：</span>
                <select v-model="newStudent.sex">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
            
            <div>
                <span>手機(jī)：</span>
                <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" v-model="newStudent.phone">
            </div>
            <div>
                <button @click="createNewStu()">添加新用戶(hù)</button>
            </div>
        </fieldset>
        <!-- 第二部分 -->
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性別</td>
                    <td>年齡</td>
                    <td>手機(jī)</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,驗(yàn)證年齡
                    if(this.newStudent.age <= 0){
                        alert('請(qǐng)輸入正確的年齡');
                        return;
                    }
                    //3,驗(yàn)證手機(jī)號(hào)
                    if(this.newStudent.phone ===''){
                        alert('請(qǐng)輸入正確的手機(jī)號(hào)');
                        return;
                    }
 
                    //4,插入新紀(jì)錄
                    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,驗(yàn)證年齡
                    if(this.newStudent.age <= 0){
                        alert('請(qǐng)輸入正確的年齡');
                        return;
                    }
                    //3,驗(yàn)證手機(jī)號(hào)
                    if(this.newStudent.phone ===''){
                        alert('請(qǐng)輸入正確的手機(jī)號(hào)');
                        return;
                    }
 
                    //4,插入新紀(jì)錄
                    this.students.unshift(this.newStudent);
 
                    //5,清除記錄
                    this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
                },
                delStudent(index){
                    this.students.splice(index,1);
                }
            }
        });
    </script>

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

您可能感興趣的文章: