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 easyui window 窗口关闭时的提示
Jun 22 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
django的ORM模型的实现原理
2019/03/04 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
如何删除一个表里面的重复行
2013/07/13 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
大三学生入党思想汇报
2014/01/02 职场文书
教师党员承诺书
2014/03/25 职场文书
社区维稳工作方案
2014/06/06 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年检验科工作总结
2015/04/27 职场文书