一.demo实现原理

输入完个人信息后  点击创建用户  数据就会显示在下面的表格中 用到了vue中的数据双向绑定 v-model v-for 还要js正则 数组的unshift splice 等方法 效果如下图

二 完整代码如下   需引入一下vue.js

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="vue/vue.js"></script>

		<style>

			/* 简单写了一下css样式 */

			#app{width:600px;margin:50px auto;}

			fieldset{border:1px solid orange;width:600px;margin-bottom:30px;}

			input{width:200px;height:20px;margin-bottom:20px;}

			table{width:600px;border:1px solid orange;}

			thead{background-color:orangered;}

		</style>

	</head>

	<body>

		<div id="app">

			<!-- 第一部分 -->

			<fieldset id="">

				<legend>学院学生信息录入系统</legend>

				<div>

					<span>姓名</span>

					<!-- v-model是为了实现数据双向绑定 -->

					<input type="text" placeholder="请输入姓名" v-model="newuser.name">

				</div>

				<div>

					<span>年龄</span>

					<input type="text" placeholder="请输入年龄" v-model="newuser.age">

				</div>

				<div>

					<span>性别</span>

					<select name="" id="" style="margin:0px 0px 20px 0px;" v-model="newuser.sex">

						<option value ="男">男</option>

						<option value ="女">女</option>

					</select>

				</div>

				<div>

					<span>手机</span>

					<input type="text" placeholder="请输入手机" v-model="newuser.tel">

				</div>

				<button @click="add()">创建新用户</button>

			</fieldset>

			<!-- 第二部分 -->

			<table>

				<thead>

					<tr>

						<td>姓名</td>

						<td>性别</td>

						<td>年龄</td>

						<td>手机</td>

						<td>删除</td>

					</tr>

				</thead>

				<tbody>

					<!-- v-for 遍历数组 -->

					<tr v-for="(p,index) in user">

						<td>{{p.name}}</td>

						<td>{{p.sex}}</td>

						<td>{{p.age}}</td>

						<td>{{p.tel}}</td>

						<td><button @click="del(index)">删除</button></td>

					</tr>

				</tbody>

			</table>

		</div>

		<script type="text/javascript">

			new Vue({

				el:'#app',

				data:{

					//自己模拟的一个数据

					user:[{name:'张三',sex:'男',age:'20',tel:'1832838'},{name:'李四',sex:'女',age:'22',tel:'15988'}],

					//页面上的数据更新在这个对象里面  因为加了v-model

					newuser:{name:'',sex:'男',age:'',tel:''}

				},

				methods:{

					add(){

						// 这是一些简单的判断

						if(this.newuser.name===''){

							alert('名字不能为空');

							//还原一下newuser对象 以便于下一次输入 以下都是

							this.newuser={name:'',sex:'男',age:'',tel:''};

							return;

						}

						if(this.newuser.age<='0'){

							alert('年龄要大于0');

							this.newuser={name:'',sex:'男',age:'',tel:''};

							return;

						}

						//正则简单验证下 要输入正确的手机号

						if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.newuser.tel))){

							alert('请输入正确的手机号');

							this.newuser={name:'',sex:'男',age:'',tel:''};

							return;

						}

						// 将newuser放进数组的头部 放进去v-for好遍历出来

						this.user.unshift(this.newuser);

						//添加完了以后 要还原一下newuser对象 以便于下一次输入

						this.newuser={name:'',sex:'男',age:'',tel:''};

					},

					del(index){

						// splice删除点击的那一条数据  index是v-for遍历出来的索引

						this.user.splice(index,1);

					}

				}

			})

		</script>

	</body>

</html>

　　

学习完vue指令 做的一个学生信息录入系统的更多相关文章

  1. Vue实现一个学生信息录入系统，实现录入和删除

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. javaweb简单的学生信息录入系统

    讲一下思路,主界面的设计就是用html表单元素,百度查找各个元素的用法,按照自己的想法摆放即可,表单提交后会把数据交给serverlet去处理,在那里定义几个字符串变量来储存获取到的数据,然后按照项目 ...

  3. 这几天有django和python做了一个多用户博客系统（可选择模板）

    这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...

  4. 花了几天学习了vue跟做的仿制app

    Vue.js国内开发者 是用于构建交互式的 Web  界面的库.它提供了mvvm 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 mvvm 模式上的视图模 ...

  5. javeweb_学生信息添加系统

    在text.jsp中画出界面,以及设置提交选项的限制 <%@ page language="java" contentType="text/html; charse ...

  6. java web 学生信息录入

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 【Vue】Vue学习(一)-Vue指令

    1.v-text v-text主要用来更新文本,等同于JS的text属性 <span v-text="msg"></span> 这两者等价 <span ...

  8. 第一天学习oc用xcode做的一个加减乘除 圆的面积计算

    #import <Foundation/Foundation.h>  //这是oc的框架 @interface jisuan : NSObject  //申明一个jisuan这样的类 并继 ...

  9. 简单做了一个代办事项列表系统 ，增删改查。 前台页面用 jquery 后台用nodejs ，数据库用的是mongdoDB 。

    引入npm 第三方mongoose包连接mongoDb本地数据库todolist const mongoose = require('mongoose'); mongoose.connect('mon ...

随机推荐

  1. thinkcmf5 支付宝接口操作

    这是我自己摸索再结合网上搜索的一大堆内容搞出来的,官方的文件对于新手来说很难理解,什么文件放什么位置,该怎么引用,都要一一尝试,我这就直接列出来了,照样放就是了.同样适用于tp5,我这个也是tp5的 ...

  2. 雷子聊并发编程（001）：基础知识之串行&并行&并发

    前言 编写正确的程序很难,而编写正确的并发程序则难上加难.与串行程序相比,在并发程序中存在更多容易出错的地方.那么,为什么还要编写并发程序?原因很简单,能充分发挥与利用多处理器系统的强大计算能力. 在 ...

  3. 数据结构（四十六）插入排序（1.直接插入排序（O(n²)） 2.希尔排序（O(n3/2)））

    一.插入排序的基本思想 从初始有序的子集合开始,不断地把新的数据元素插入到已排列有序子集合的合适位置上,使子集合中数据元素的个数不断增多,当子集合等于集合时,插入排序算法结束.常用的 插入排序算法有直 ...

  4. SpringBoot与MybatisPlus3.X整合之通用枚举(十二)

    一 通用枚举 解决了繁琐的配置,让 mybatis 优雅的使用枚举属性! 自3.1.0开始,可配置默认枚举处理类来省略扫描通用枚举配置 默认枚举配置 升级说明: 3.1.0 以下版本改变了原生默认行为 ...

  5. Linux进程组和会话

    Linux的进程相互之间有一定的关系.比如说,在Linux进程基础中,我们看到,每个进程都有父进程,而所有的进程以init进程为根,形成一个树状结构.我们在这里讲解进程组和会话,以便以更加丰富的方式了 ...

  6. SpringBoot 2.0 开发案例之百倍级减肥瘦身之旅

    前言 为了存我的小黄图,最近在做一款图床服务,集成了各种第三方云存储服务,目前正在内部测试阶段.项目是以Jar的形式运行在腾讯云上,不要问我为什么使用腾讯云了,因为阿里云老用户和狗不得入内. 问题凸显 ...

  7. 并发中如何保证缓存DB双写一致性（JAVA栗子）

    并发场景中大部分处理的是先更新DB,再(删缓.更新)缓存的处理方式,但是在实际场景中有可能DB更新成功了,但是缓存设置失败了,就造成了缓存与DB数据不一致的问题,下面就以实际情况说下怎么解决此类问题. ...

  8. Android 设备唯一标识（多种实现方案）

    前言 项目开发中,多少会遇到这种需求:获得设备唯一标识DeviceId,用于: 1.标识一个唯一的设备,做数据精准下发或者数据统计分析: 2.账号与设备绑定: 3..... 分析 这类文章,网上有许多 ...

  9. 记一次C#调用C++踩过的坑

    一般来说,C#调用C++生产的dll,如下: C++的项目要设置为"导出dll的项目",而且导出的函数,一般为: extern "C" __declspec(d ...

  10. 真正的打包scrapy单文件(不包含cfg)

    前置:https://www.cnblogs.com/luocodes/p/11827850.html 解决最后一个问题,如何将scrapy真正的打包成单文件 耗了一晚上时间,今天突然有灵感了 错误分 ...