使用vue.js 渲染数据实现学生管理系统 demo 增删查功能

昵称再吊也会输给备注

于 2024-03-18 20:34:36 发布

阅读量559

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_74991857/article/details/136819179

版权

本文描述了一个使用Vue.js构建的学生管理系统，包括添加新学生、搜索学生、查看和编辑学生信息的功能，以及模态框的实现。

摘要由CSDN通过智能技术生成

<!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>学生管理系统</title>
    <script src="vue.js"></script>
</head>
<style>
    body {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 100vh;
        margin: 0;
    }

    #app {
        width: 100%;
        max-width: 1000px;
        padding: 20px;
        border: 1px solid #ccc;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    table thead  tr th:nth-child(4){
        
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }


    input[type="text"] {
        width: 150px;
        padding: 5px;
    }

    input[type="button"] {
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }

    h2 {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }

    .modal {
    disp