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查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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验证复选框有效性的示例
2013/11/13 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
vue 中directive功能的简单实现
2018/01/05 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
详解Python绘图Turtle库
2019/10/12 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
《欢乐的泼水节》教学反思
2014/04/22 职场文书
学习雷锋活动总结
2014/04/29 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
解除租赁合同协议书
2016/03/21 职场文书