vue实现在线学生录入系统


Posted in Javascript onMay 30, 2020

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

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

具体页面是这样的:

vue实现在线学生录入系统

先罗列一下其中用到的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.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
vue实现信息管理系统
May 30 #Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
模拟select的代码
2011/10/19 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
PyMongo安装使用笔记
2015/04/27 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python实现人工蜂群算法
2020/09/18 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
人力资源管理专业应届生求职信
2013/09/28 职场文书
自我评价如何写好?
2014/01/05 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2015年成本会计工作总结
2015/10/14 职场文书