vue实现对学生信息管理-增删改查

效果图：

修改功能不够好，应该在修改时弹出一个专门的修改窗口进行修改功能。

增加就是向数组里添加，使用.push()就行，删除和修改都使用splice(),查询将数组里的学号与输入的学号进行对比，查找到后弹出窗口显示该学生姓名。

代码如下：

<!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/>
            <input type="button" value="添加" class="add" @click="add">
            <p>在上方输入框输入信息后点击需修改那列的修改按钮进行修改</p>
            <p>输入学号查询该学生姓名</p>
            <label>学号：<input type="text" 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("输入框不允许为空！！！");
            }
            else{
                this.students.push(this.student);
                this.student={};
            }
            
        },
        remove:function(index){
            this.students.splice(index,1)
        },
        search:function(){
            if(this.sear=='')
            {
                alert("学号不允许为空！！！");
            }
            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实现对学生信息管理-增删改查

猜你喜欢