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 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
uni-app微信小程序登录授权的实现
May 22 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python读取xlsx的方法
2018/12/25 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
客户代表自我评价范例
2013/09/24 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
党员党性分析材料
2014/02/17 职场文书
秋天的图画教学反思
2014/05/01 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
写给医生的感谢信
2015/01/22 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
MySQL数据管理操作示例讲解
2022/12/24 MySQL