vue realization of student information management - CRUD

Renderings:

Editing is not good enough, it should pop up a special window to modify function modification when modifying.

Increase is to add to the array, use .push () on the line, delete and modify all use splice (), query the array of student number student number and enter the comparison, after finding the pop-up window displays the student's name.

code show as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="../../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>班级</td>
                    <td>专业</td>
                    <td colspan="2">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-cloak v-for="(item,index) in students">
                    <td>{{item.id1}}</td>
                    <td>{{item.name1}}</td>
                    <td>{{item.class1}}</td>
                    <td>{{item.major}}</td>
                    <td>
                        <input type="button" value="删除" id="del" @click="remove(index)">
                         <input type="button" value="修改" class="modi" @click="updatestu(index)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="inp">
            <label>学号：<input type="text" id="idc" v-model="student.id1"></label>
            <br/>
            <label>姓名：<input type="text" id="nam"  v-model="student.name1"></label>
            <br/>
            <label>班级：<input type="text" id="cla" v-model="student.class1"></label>
            <br/>
            <label>专业：<input type="text" id="maj" v-model="student.major"></label > 
            < br /> 
            < the INPUT of the type = "the Button" value = "add" class = "the Add" @click = "the Add" > 
            < the p- > click on the name of the column that modify the Modify button to modify after the above input box information </ the p- > 
            < the p- > enter the student ID to query the student's name </ the p- > 
            < label > student ID: < the iNPUT of the type = "text" the above mentioned id = "idc" v-Model = "Sear" > </ label > 
            <input type="button" value="查询" class="find" @click="search()">
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

html

var app=new Vue({
    el: '#app',
    data:{
        student:{
            id1:'',
            name1:'',
            class1:'',
            major:''
        },
        sear:'',
        students:[]
    },
    methods: {
        add:function(){
            if(this.student.id1==''||this.student.name1==''||this.student.class1==''||this== .student.major '' ) 
            { 
                Alert ( "input box does not allow empty !!!" ); 
            } 
            the else {
                 the this .students.push ( the this .student);
                 the this .student = {}; 
            } 
            
        }, 
        Remove : function (index) {
             the this .students.splice (index,. 1 ) 
        }, 
        Search: function () {
             IF ( the this .sear == '' ) 
            { 
                Alert ( "student number NOT nULL !!!");
            }
            else
            {
                for(var i=0;i<this.students.length;i++)
            {
                if(this.students[i].id1==this.sear){
                    alert("该学生姓名："+this.students[i].name1);
                    
                }
                
            }
            
            }
            
        },
        updatestu(index){
            
                this.students.splice(index,1,this.student);
                this.student={};  
       }
        
    },
})

vue realization of student information management - CRUD

Guess you like