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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
js常用代码段整理
Nov 30 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue内置指令详解
2018/04/03 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
js实现简单进度条效果
2020/03/25 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python算法题 链表反转详解
2019/07/02 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
pyspark 随机森林的实现
2020/04/24 Python
秋季运动会加油稿200字
2014/01/11 职场文书
求职信范文怎么写
2014/01/29 职场文书
简历里的自我评价
2014/01/31 职场文书
中学教师自我鉴定
2014/02/07 职场文书
王老吉广告词
2014/03/20 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年残联工作总结
2014/11/21 职场文书
员工辞职信怎么写
2015/02/27 职场文书
信访工作个人总结
2015/03/03 职场文书
专家推荐信怎么写
2015/03/25 职场文书
安全生产会议制度
2015/08/06 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android