一.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. 云计算 docker 容器部署

    什么是docker容器: 容器就是在隔离的环境中运行的一个进程,如果进程停止,容器就会退出.隔离的环境拥有自己的系统文件,ip地址,主机名等kvm虚拟机,linux,系统文件 容器和虚拟化的区别 : ...

  2. 百万年薪python之路 -- 迭代器

    3.1 可迭代对象 3.1.1 可迭代对象定义 **在python中,但凡内部含有 _ _ iter_ _方法的对象,都是可迭代对象**. 3.1.2 查看对象内部方法 该对象内部含有什么方法除了看源 ...

  3. 百万年薪python之路 -- 文件操作练习

    1.有如下文件,a1.txt,里面的内容为: 老男孩是最好的学校, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: a,将原文件全部读出来并打印. with ...

  4. 【java基础】- java双亲委派机制

    在了解双亲委派机制之前,你应当知道classloader(如果不了解,可以现在去恶补一下哈) 四种classloader 虚拟机自带 引导类加载器(Bootstrap ClassLoader) 扩展类 ...

  5. human_pose_estimation_demo的再进一步研究

    这次研究的主要是速度问题,后来还获得了其它方面的收获. 1.原始的抽帧       对于这样一个问题,想提高速度,能够想到的最简单.最直接的方法就是“抽帧”.比如添加一个计数器 这里,只有当Sumof ...

  6. django-模板之block（四）

    base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 用Python编写简单的发红包程序和计算器原理

    用Python编写简单的发红包程序: 第一种解法:数轴方法解决 import random def red_packet(money,num): money = money * 100 #将钱数转换成 ...

  8. Maven optional关键字透彻图解

    写在前面 本来想写一篇「如何自定义Spring Boot Starter」,但是为了更好理解 Starter 的一些设计理念和其中的关键点,所以提前将一些细节内容单独提取出来讲解说明 在 Maven ...

  9. Mycat分布式数据库架构解决方案--Linux安装运行Mycat

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! Myc ...

  10. SYZOJ中文安装指南

    Made By:Spaceskynet Thanks to other developers. 测试系统 Ubuntu-17.04 PS(全局变量): [syzoj2 path] = 您git的syz ...