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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP图片加水印实现方法
2016/05/06 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python学习笔记_数据排序方法
2014/05/22 Python
python 中xpath爬虫实例详解
2019/08/26 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python处理写入数据代码讲解
2020/10/22 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
大型车展策划方案
2014/02/01 职场文书
幼师求职自荐信
2015/03/26 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
小学大队委竞选口号
2015/12/25 职场文书
党员理论学习心得体会
2016/01/21 职场文书