Vue实现学生信息录入系统

最新推荐文章于 2024-04-29 13:11:22 发布
最新推荐文章于 2024-04-29 13:11:22 发布
阅读量2.2k 收藏 11
点赞数 1
分类专栏： 小练习 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987993/article/details/108339019
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息录入</title>
<style>
*{
   
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
#app{
   
    width: 1000px;
    background-color: #eee;
    margin: 0 auto;
    position: relative;
    min-height: 600px;
    padding-top: 50px;
}
.add{
   
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 30px;
    background-color: tomato;
    border: none;
    outline: none;
}
.addInfo{
   
    /* display: flex; */
    /* justify-content: center; */
    padding: 5px;
    width: 500px;
    height: 300px;
    border: 1px solid rebeccapurple;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: lightcyan;

}
.addInfo p{
   
    text-align: left;
    display: block;
    width: 400px;
    height: 50px;
}
.addInfo p input{
   
    outline: none;
    border: 1px solid #ff6700;
}
.addInfo p:last-child input{
   
    width: 80px;
    height: 40px;
    margin: 0 20px;
    background-color: lightseagreen;
    outline: none;
    border: none;
}
.addInfo p:last-child{
   
    /* height: 30px; */
    margin-left: 50px;
    text-align: center;
}
.editInfo{
   
    /* display: flex; */
    /* justify-content: center; */
    padding: 5px;
    width: 500px;
    height: 300px;
    border: 1px solid rebeccapurple;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: lightcyan;

}
.editInfo p{
   
    text-align: left;
    display: block;
    width: 400px;
    height: 50px;
}
.editInfo p input{
   
    outline: none;
    border: 1px solid #ff6700;
}
.editInfo p:last-child input{
   
    width: 80px;
    height: 40px;
    margin: 0 20px;
    background-color: lightseagreen;
    outline: none;
    border: none;
}
.editInfo p:last-child
最低0.47元/天 解锁文章
Cain_Chen_1997
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现在线学生录入系统
11-20
最近一直在学Vue，这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。 因为主要是巩固Vue的知识，所以数据也没放数据库，也没用JavaBean或者Servlet，直接写死到表单里了。 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用 再提一下可能会用到的知识点: ①JavaScript中对数组头添元素的unshift()方法 ②JavaScript中对数组删除元素的splice()删除方法 上一下代码，大家结合上面我罗列的知识点，就能很容易看懂它: <!DOCTYPE html> <h
用Vue实现的学生录入系统
TaiYangb的博客
05-22 3232
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--引入cs--> <!--引入jQuery--> <script src="js/vue.js" type="text/javascript" charset="utf-8"></...
Vue入门项目：学生管理系统之班级管理 【含源码】
最新发布
2401_84433829的博客
04-29 358
1.概述====——班级管理：添加班级、修改班级、查询班级、删除班级——学生管理：添加学生、修改学生、查询学生（含条件）、删除学生2.表结构=====3.搭建环境======3.1后端环境。
基于Vue的学生信息录入系统(含增删功能)
weixin_30846599的博客
11-28 771
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sca...
Vue实现一个学生信息录入系统，实现录入和删除
weixin_30861797的博客
11-23 1698
效果如下： 代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="...
vue实现学生信息管理系统
11-20
本文实例为大家分享了vue实现学生信息管理系统的具体代码，供大家参考，具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> [removed][removed] <style> .title{margin:20px;font-weight: bold;font-size: 20px;} </style> </head> <
vue实现学生录入系统之添加删除功能
10-18
本文给大家带来一个小案例基于vue实现学生录入系统功能，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
javaweb学生信息管理系统学生选课管理系统源代码，基于Springboot和vue实现
02-09
javaweb学生信息管理系统学生选课管理系统源代码，基于Springboot和vue实现， 基于Springboot和vue的教务（学生）管理系统拥有三种角色：管理员、教师和学生 管理员：班级管理、课程管理、创建课程、管理员管理、...
使用vue3实现页面学生成绩录入系统
a1357000424的博客
04-27 1507
vue3
vue——7-vue案例：学生录用系统
肖的博客
09-16 775
css #enjoy{ margin: 50px auto; width: 600px; } fieldset{ border: 1px solid orange; } fieldset input{ width:...
vue实现简单学生信息管理
10-15
主要为大家详细介绍了vue实现简单学生信息管理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue常用指令实现一个学生录入系统
m0_67393039的博客
03-06 283
一、功能描述： 1，对于输入的内容进行简单的判断。 2，实现简单的增加和删除功能。 二、运行情况 图1 页面初始化情况 点击"添加新用户"如下： 图2： 添加一个新用户 图3：删除Anna和张三两个用户 全部代码如下所示：（直接复制到一个.html文件即可成功运行） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
利用vue指令实现学生信息录入系统
weixin_43391261的博客
11-04 2048
利用vue指令完成学生信息录入系统案例
Vue实现一个简单在线学生录入系统
weixin_43729854的博客
11-14 3640
最近一直在学Vue，这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。 因为主要是巩固Vue的知识，所以数据也没放数据库，也没用JavaBean或者Servlet，直接写死到表单里了。 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用 再提一下可能会用到的知识点: ①Java...
vue.js 小demo 学生信息管理增删功能
weixin_30518397的博客
11-27 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js demo</title> <link rel="stylesheet" type="text/css" href="in...
Vue实现学生信息管理页面
m0_52709447的博客
05-23 1304
①在学生信息录入系统中，完成“姓名”、“学号”、“年龄”、“性别”、“地址”字段的信息填写后，点击“创建学生信息”按钮，即可将填写字段的信息加载在学生信息列表的表格中，若任意一个字段未填写，则以弹窗的形式进行信息提示，如“学号”字段未填写，弹窗提示“学号不能为空！②在学生信息列表中，可以通过点击“年龄”的表头实现学生信息按照年龄信息升序排序操作；点击“删除”按钮可以删除所在行的学生信息；在搜索框中输入学生姓名，点击“搜索”按钮，在学生信息列表中仅显示被搜索学生的相关信息。掌握列表渲染指令的使用；
Vue项目实战（简易学生管理系统）
m0_48431810的博客
11-22 923
用Vue实现一个简易学生管理系统，从而实现一个增删查改功能的系统
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值