您的位置：首页 > 编程技术 > js  >  vue实现在线学生录入系统

vue实现在线学生录入系统

 更新时间：2020年5月29日 20:21  点击：1591

最近一直在学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>

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

[!--infotagslink--]

相关文章

  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03

  • Vue基于localStorage存储信息代码实例

    这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16

  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23

  • vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28

  • vue treeselect获取当前选中项的label实例

    这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19

  • Vue中slot-scope的深入理解（适合初学者）

    这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09

  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13

  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30

  • vue项目多环境配置(.env)的实现

    最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20

  • vue cli4.0项目引入typescript的方法

    这篇文章主要介绍了vue cli4.0项目引入typescript的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17

  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20

  • Vue 列表页带参数进详情页的操作(router-link)

    这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13

  • vue3如何按需加载第三方组件库详解

    距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02