Vue实现学生信息管理页面

这篇具有很好参考价值的文章主要介绍了Vue实现学生信息管理页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue实现学生信息管理页面

一. 实验目的

1.掌握HTML基础知识的应用;

2.掌握Vue基本架构的应用;

3.掌握内容渲染指令的使用;

4.掌握事件绑定指令的使用;

5.掌握列表渲染指令的使用;

6.掌握双向数据绑定指令的使用;

7.实现一个学生信息管理页面。

二. 实验步骤(及实验数据)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学生信息管理页面</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
      }

      h3 {
        text-align: center;
        margin: 20px 0px;
        font-size: 36px;
      }

      .inputInfo {
        width: 800px;
        margin: 0px auto;
        margin-bottom: 18px;
      }

      .inputInfo input[type="text"],
      .inputInfo input[type="number"] {
        width: 700px;
        height: 32px;
        border-radius: 4px;
        padding-left: 6px;
      }

      .inputInfo input[type="radio"] {
        margin-right: 6px;
        margin-left: 6px;
      }

      .inputInfo select {
        width: 100px;
        height: 32px;
        border-radius: 4px;
      }

      .btnStyle {
        display: block;
        padding: 6px 12px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        color: white;
        border: 1px solid transparent;
        border-radius: 8px;
        margin: 0px auto;
        margin-bottom: 20px;
      }

      .createBtn {
        background-color: #d9534f;
        border-color: #d43f3a;
      }

      .optionBtn {
        width: 800px;
        margin: 0px auto;
      }

      .optionBtn>button {
        display: inline-block;
        margin-left: 10px;
      }

      .averageBtn,
      .sortBtn {
        background-color: #E5E5E5;
        border-color: #E5E5E5;
        color: #333;
        margin: 20px auto;
      }

      .studentList {
        width: 800px;
        margin: 0px auto;
        border-collapse: collapse;
      }

      .studentList thead tr td {
        background-color: #6495ED;
      }

      .studentList thead tr td>a {
        font-size: 24px;
        text-decoration: none;
        color: #333;
      }

      .studentList td {
        height: 60px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 24px;
      }

      .deleteBtn {
        background-color: #428bca;
        border-color: #357ebd;
        margin: 0px auto;
      }

      .searchBtn {
        background-color: #5bc0de;
        border-color: #46b8da;
        height: 20px;
        margin: 0px 10px;
        font-size: 14px;
      }

      .searchInfo {
        width: 800px;
        height: 50px;
        margin: 0px auto;
        line-height: 50px;
        font-size: 24px;
      }

      .searchInfo>input {
        height: 28px;
        border-radius: 4px;
        padding-left: 6px;
      }

      .searchInfo>button {
        height: 34px;
        font-size: 20px;
        line-height: 20px;
        display: inline-block;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>学生信息录入系统</h3>
      <!-- 学生信息输入表单 -->
      <div class="inputInfo">
        <label for="studentName">姓名:</label>
        <input type="text" id="studentName" v-model="StudentNewMessage.stuName" placeholder="请输入学生的姓名......" />
      </div>
      <div class="inputInfo">
        <label for="studentID">学号:</label>
        <input type="text" id="studentID" v-model="StudentNewMessage.stuID" placeholder="请输入学生的学号......"/>
      </div>
      <div class="inputInfo">
        <label for="studentAge">年龄:</label>
        <input type="number" id="studentAge" v-model.number="StudentNewMessage.age" placeholder="请输入学生的年龄......"/>
      </div>
      <div class="inputInfo">
        <span>性别:</span>
        <input type="radio" value="男生" name="gender" id="boy" v-model="StudentNewMessage.gender" />
        <label for="boy">男生</label>
        <input type="radio" value="女生" name="gender" id="girl" v-model="StudentNewMessage.gender"/>
        <label for="girl">女生</label>
      </div>
      <div class="inputInfo">
        <span>地址:</span>
        <select v-model="StudentNewMessage.address">
          <option value="请选择">请选择</option>
          <option value="四川省">四川省</option>
          <option value="山东省">山东省</option>
          <option value="海南省">海南省</option>
          <option value="湖南省">湖南省</option>
        </select>
      </div>
      <button class="btnStyle createBtn" @click="insertStuMessage()">创建学生信息</button>

      <hr />
      <!-- 学生信息列表 -->
      <h3>学生信息列表</h3>
      <div class="optionBtn">
      </div>
      <table class="studentList">
        <thead>
          <tr>
            <td>姓名</td>
            <td>学号</td>
<!--            // javascript:void(0) 用于阻止a标签的默认行为 阻止跳转-->
            <td><a href="javascript:void(0)" @click="StuAgeEstimate()">年龄↑</a></td>
            <td>性别</td>
            <td>地址</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in students" :key="item.stuID">
            <td>{{item.stuName}}</td>
            <td>{{item.stuID}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.address}}</td>
            <td>
              <button class="btnStyle deleteBtn" @click="deleteStuMessage(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="searchInfo">
        按姓名搜索:<input type="text" v-model="StuNameSearch" />
        <button class="btnStyle searchBtn" @click="StuSearch()">搜索</button>
      </div>
    </div>
    <!-- 以下是Vue.js框架练习代码,请补充 -->
    <script>
      var app=Vue.createApp({
        data(){
          return {
            students: [{
              stuName: '张三',
              stuID: 10,
              age: 20,
              gender: '男生',
              address: '四川省'
            },
              {
                stuName: '李四',
                stuID: 11,
                age: 18,
                gender: '男生',
                address: '海南省'
              },
              {
                stuName: '王五',
                stuID: 12,
                age: 19,
                gender: '女生',
                address: '山东省'
              }
            ],
            StudentNewMessage:{
              stuName: '',
              stuID: '',
              age:0,
              gender: '',
              address: ''
            },//存储新添加的学生信息
          }
        },
        methods: {
          // 添加学生信息
          insertStuMessage() {
            // 判断学生信息是否填写完整
            // !== 用于判断两个值是否不相等  === 用于判断两个值是否相等
            if (this.StudentNewMessage.stuName === '') {
              alert('学生姓名不能为空!');
              return;
            } else if (this.StudentNewMessage.stuID === '') {
              alert('学生学号不能为空!');
              return;
            } else if (this.StudentNewMessage.age === '' || this.StudentNewMessage.age <= 10) {
              alert('学生年龄不能小于10岁!');
              return;
            } else if (this.StudentNewMessage.gender === '') {
              alert('学生性别不能为空!');
              return;
            } else if (this.StudentNewMessage.address === '请选择' || this.StudentNewMessage.address === '') {
              alert('学生未选择地址!');
              return;
            } else {
              //将新添加的学生信息添加到students数组中
              this.students.push(this.StudentNewMessage);
              this.StudentNewMessage = {};
            }
          },
          // 按年龄排序
          StuAgeEstimate() {
            this.students.sort((a, b) => {
              return a.age - b.age;
            })
          },
          // 删除学生信息
          deleteStuMessage(index){
            this.students.splice(index,1);
          },
            // 按姓名搜索
            StuSearch() {
              // 判断是否输入了学生姓名
              if (this.StuNameSearch === '') {
                alert('请输入学生姓名!');
                return;
              } else {
                // 遍历students数组,查找是否有符合条件的学生
                for (let i = 0; i < this.students.length; i++) {
                  if (this.students[i].stuName === this.StuNameSearch) {
                    // 将符合条件的学生信息存储到一个新数组中
                    let stuSearch = [];
                    stuSearch.push(this.students[i]);
                    // 将符合条件的学生信息替换students数组
                    this.students = stuSearch;
                    return;
                  }
                }
                // 如果遍历完students数组后,没有符合条件的学生,则提示没有该学生
                alert('没有该学生!');
              }
            }
        }
      }).mount("#app");
    </script>
  </body>
</html>

Vue实现学生信息管理页面文章来源地址https://www.toymoban.com/news/detail-498545.html

详情见:https://www.mingorfang.top/post/329dd7a6.html

到了这里,关于Vue实现学生信息管理页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • qt实现信息管理系统(学生信息管理系统)功能更完善

    信息系统代码地址:https://gitee.com/dxl96/StdMsgSystem 本学生信息管理系统同升级改造的幅度较大,涉及到的东西对于初学者来说,可能稍显复杂,可以先移步到 https://blog.csdn.net/IT_CREATE/article/details/82027462 查看简易的系统。 本系统引入日志管理,数据库选择支持sqllite、mysql,自

    2024年02月13日
    浏览(46)
  • 学生信息管理系统(Python实现)

    目录 1.功能介绍 2.代码模块 3.全局代码 摘剑!!! 采用列表+类的组合来实现对信息的增删改查,整体代码比较简单,只用了100余行 1)添加学生信息 2)查询学生信息 3)删除学生信息 4)修改学生信息 5)遍历学生信息 1)学生类 2)菜单menu 3)添加insert  4)查询search 5)删

    2024年02月13日
    浏览(60)
  • nodejs+vue+elementui学生档案信息管理系统_06bg9

    利用计算机网络的便利,开发一套基于nodejs的大学生信息管理系统,将会给人们的生活带来更多的便利,而且在经济效益上,也会有很大的便利!这可以节省大量的时间和金钱。学生信息管理系统是学校不可缺少的一个环节,其内容直接关系到学生、教师和管理者。系统主要完

    2024年02月13日
    浏览(49)
  • C语言——三种方式实现学生信息管理

    目录 方式一 静态实现 菜单打印函数  初始化学生信息 增加学生信息 

    2023年04月08日
    浏览(26)
  • 【超详细】Java实现学生信息管理系统

     项目介绍:用java实现学生信息的管理,其中录入的数据包括:学号、姓名、年龄、居住地等,并且能够实现对学生信息的添加、修改、删除、查看功能。 一、创建项目 1、项目名称:myStudentManager 二、创建包 1、包名称:study 2、名字也可以自己进行命名 三、创建两个类 1、

    2024年02月04日
    浏览(43)
  • Android Studio实现学生信息管理系统

    该学生信息管理系统具有添加学生信息的功能、删除学生信息的功能、修改学生信息功能和查询学生信息的功能。利用Sqlite数据库实现对学生信息的增删改查,登录密码也采用了MD5加密的方式,更加注重用户隐私安全。除了有欢迎界面,还有注册和登录界面,满足应用的基础

    2024年02月02日
    浏览(42)
  • 基于C++实现的学生信息管理系统

    点击获取(源码+课程设计报告文档+截图) 学生信息管理系统是针对学校人事处的大量业务处理工作而开发的管理软件,主要用于学校学生信息管理,总体任务是实现学生信息关系的系统化、科学化、规范化和自动化,其主要任务是用计算机对学生各种信息进行日常管理,如

    2024年02月04日
    浏览(44)
  • 基于SSM架构实现学生信息管理系统

    本项目是一个基于SSM(Spring+SpringMVC+MyBatis)框架搭建的学生信息管理系统,实现了对学生、用户等信息的增删改查功能,以及登录、分页等功能。本项目采用了三层架构,分为entity层、service层、dao层和controller层,使用了Maven进行项目管理,使用了MySQL作为数据库。 本项目主要

    2024年02月03日
    浏览(52)
  • JAVA学生信息管理系统(数据库实现)

    这次的项目是用数据库实现学生的信息管理系统,有三步组成,写项目链接数据库实现相关的操作 开发工具: eclipse、MySQL、navicat、mysql-connector-java-8.0.27     (1)主页面   (2)添加界面   (3)删除界面    (4)修改界面  (5)查找界面 (6)数据库链接   添加Java驱动包

    2024年02月11日
    浏览(45)
  • C语言实现学生信息管理系统(附原码)

    本人的C语言学习完后,用所学的知识自己实现了一个学生管理系统,新手一个,代码还有待完善,欢迎大家在评论区指出错误! 一、流程图 二、函数的目录  三、程序介绍  1.主要功能: 添加学生信息、打印学生信息、查找学生信息、添加学生信息、修改学生信息、计算学

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包