vue实现在线学生录入系统

2024-10-01 11:58:28

最近一直在学Vue，这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。

因为主要是巩固Vue的知识，所以数据也没放数据库，也没用JavaBean或者Servlet，直接写死到表单里了。

具体页面是这样的:

先罗列一下其中用到的Vue的知识点:

①v-for指令的使用

②v-model指令的使用

③v-on/@click指令的使用

再提一下可能会用到的知识点:

①JavaScript中对数组头添元素的unshift()方法

②JavaScript中对数组删除元素的splice()删除方法

上一下代码，大家结合上面我罗列的知识点，就能很容易看懂它:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>在线学生信息录入</title>
 <style>
  /*css样式设置 */
  #app {
   margin: 50px auto;
   width: 600px;
  }

  fieldset {
   border: 10px solid pink;
   margin-bottom: 30px;
  }

  fieldset input {
   width: 200px;
   height: 30px;
   margin: 10px 0px;
  }

  table {
   width: 600px;
   border: 2px solid pink;
   text-align: center;
  }

  thead {
   background-color: pink;
  }

 </style>
</head>
<body>
<div id="app">
 <!--信息输入框-->
 <fieldset>
  <legend>学生录入系统</legend>
  <div>
   <div><span>姓名:</span>
    <!--用v-model指令绑定输入的信息，更新到表格-->
    <input type="text" placeholder="请输入姓名" v-model=" newMessage.name">
   </div>
   <div><span>年龄:</span>
    <input type="text" placeholder="请输入年龄" v-model=" newMessage.age">
   </div>
   <div>
    <span>性别:</span>
    <select v-model=" newMessage.sex">
     <option value="男">男</option>
     <option value="女">女</option>
    </select>
   </div>
   <div>
    <span>电话:</span>
    <input type="text" placeholder="请输入电话号码" v-model=" newMessage.phone">
   </div>
  </div>
  <button @click="createNewMessage()">创建新用户</button>
 </fieldset>
 <!--信息显示框-->
 <table>
  <thead>
  <tr>
   <td>姓名</td>
   <td>性别</td>
   <td>年龄</td>
   <td>电话</td>
   <td>删除</td>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(i,index) in persons">
   <td>{{i.name}}</td>
   <td>{{i.sex}}</td>
   <td>{{i.age}}</td>
   <td>{{i.phone}}</td>
   <td>
    <button @click=" deleteStuMessage(index)">删除</button>
   </td>
  </tr>
  </tbody>
 </table>
</div>

<script src="vue.min.js"></script>
<script>
 new Vue({
  el: '#app',
  data: {
   persons: [
    {name: '王舞', age: 20, sex: '女', phone: '13547878787'},
    {name: '青峰', age: 22, sex: '男', phone: '13547878784'},
    {name: '小倩', age: 24, sex: '女', phone: '13547878781'},
    {name: '阿航', age: 22, sex: '男', phone: '13547878786'},
   ],
   newMessage: {name: '', age: '', sex: '男', phone: ''}
  },

  methods: {
   // 创建新记录
   createNewMessage() {
    //添加约束
    if (this.newMessage.name === "") {
     alert("请输入姓名!");
     return;
    }
    if (this.newMessage.age <= 0) {
     alert("请输入正确年龄!");
     return;
    }
    if (this.newMessage.phone === "") {
     alert("请填写手机号码!");
     return;
    }

    //用数组的unshift方法将新创建的信息加到表头
    this.persons.unshift(this.newMessage);
    //清空数据
    this.newMessage = {name: '', age: '', sex: '男', phone: ''};
   },

   //删除记录
   deleteStuMessage(index) {
    this.persons.splice(index, 1);
   }
  },

 });

</script>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现学生录入系统之添加删除功能

一.案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset inp
vue实现户籍管理系统

本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下户籍管理系统,v-model,v-for的引用界面预览步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
VueJS实现用户管理系统

本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1
vue实现信息管理系统

最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
vue实现在线学生录入系统

最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识. 因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了. 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用再提一下可能会用到的知识点: ①JavaScript中对数组头添元素的unshift()方法 ②JavaScript中对数组删除元素的splice()删除方法
vue常用指令实现学生录入系统的实战

一.功能描述: 1,对于输入的内容进行简单的判断. 2,实现简单的增加和删除功能. 二.运行情况图1 页面初始化情况点击"添加新用户"如下: 图2: 添加一个新用户图3:删除Anna和张三两个用户全部代码如下所示:(直接复制到一个.html文件即可成功运行) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
vue实现表单录入小案例

本文实例为大家分享了vue实现表单录入的具体代码,供大家参考,具体内容如下最终效果: 代码: <template> <div id="app">  <fieldset> <legend>学生录入系统</legend> <div> <span>姓名:</span> <input type="text" placeholder=&qu
java实现学生成绩录入系统

本文为大家分享了java实现学生成绩录入系统,供大家参考,具体内容如下 1.学生类,包括学生的姓名和各科成绩 public class Score { public String name; public double EnglishGrade, MathGrade,phyicalGrade, chemicalGrade,biologicalGrade; Score() { } public Score(String name,double EnglishGrade, double MathGr
C语言实现的学生选课系统代码分享

好久没玩过C语言了,上一次还是在大二的时候...废话不多说,这里有一个C语言实现的学生选课系统代码,分享给大家,具体如下: #include<stdio.h> #include<stdlib.h> int N1,N2,kk1,kk2,kk3; struct couse * head1; struct student * head2; struct couse//课程信息结构体 { int num1; char name1[20]; int score; int nelepeo; /
vue实现后台管理权限系统及顶栏三级菜单显示功能

•效果演示地址项目demo展示重要功能总结权限功能的实现权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤,生成可以访问的路由表,并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表,从而实现左侧和顶栏菜单的展示. 实现步骤: 1.在router/index.js中,给相应的菜单设置默认的roles信息: 如下:给"权限设置"菜单设置的权限为:meta:{roles: ['admin
Java简易学生成绩系统写法实例

刚刚接触Java不久,写法上和一些术语还不是很熟悉,如有不对的地方,希望指正.本次学生成绩系统要求能实现成绩录入,修改成绩,绩点计算,退出系统四个功能,在进行思路分析后,我构建了三个大类:ScoreInformation类:Surface类:Main类. 一,ScoreInformation类: public class ScoreInformation { private String stunumber; //学号 private String name; //姓名 private doub
python实现简单成绩录入系统

学了一个多月的python,做了一个小程序:python实现简单成绩录入系统,实验一下 menu部分 from tkinter import*#这是一个python模块,python3中都有 import tkinter.messagebox#这也是一个模块 from file_read import read from file_write import write class student_main():#定义一个学生类 def __init__(self): self.name =''
基于C语言实现学生选课系统

鉴于C语言实现的通讯录,为了巩固C语言的基础知识,试着写一个简单的学生选课系统. 思路比较简单: 1.回滚显示各种提示信息或操作信息 2.链表操作. 代码中有管理员部分功能没有实现,学生和老师的功能基本实现,但有待加固,如果初学者可是试着去完善一下. 还可以将老师,学生的信息输出到文件文本中,本代码中没有实现,但并不是很难. 代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> /* 总链表--

vue实现在线学生录入系统

相关推荐

随机推荐