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 (用setTimeout而非setInterval)
Dec 28 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python flask 多对多表查询功能
2017/06/25 Python
使用python实现BLAST
2018/02/12 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python画环形图的方法
2020/03/25 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python实现飞船大战
2020/04/24 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
php字符串倒叙
2021/04/01 PHP
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python