一.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. redis之Scan

    scan 相比keys 具备有以下特点:1.复杂度虽然也是 O(n),但是它是通过游标分步进行的,不会阻塞线程;2.提供 limit 参数,可以控制每次返回结果的最大条数,limit 只是一个 hin ...

  2. C# 添加、修改、删除Excel图表数据标签

    图表中,图表数据标签以数据化形式表现图表中的特定数据,可增强图表的可读性.我们可以对图表添加数据标签,也可以对已有的数据标签进行修改或者删除,下面将通过C#代码形式来实现. 使用工具:Spire.XL ...

  3. Java根据参数返回相应类

    问题初衷:如何根据参数变换方法的返回类型(参数为 类) 解决方案: 下面方法是放在工具类(例:YslRequestUtil) public <T> T response(Object re ...

  4. 用最简单的方式学Python单链表

    Python 实现单链表 在本博客中,我们介绍单链表这种数据结构,链表结构为基于数组的序列提供了另一种选择(例如Python列表). 基于数组的序列和链表都能够对其中的元素保持一定得顺序,但采用的方式 ...

  5. SpringBoot2.X整合Actuator

    一 说明 Actuator 的定义 actuator 是一个制造术语,指的是用于移动或控制某物的机械装置.执行器可以通过一个小的变化产生大量的运动. 要将 actuator 添加到基于 Maven 的 ...

  6. 【Redis深度历险】那些年Redis的数据结构

    [Redis深度历险]那些年Redis的数据结构 Redis端口号6379的来源 Redis的端口号是6379,但这个端口号并不是随机选择的,源于"MERZ",这个单词在手机当中的 ...

  7. 你不知道的Canvas（二）

    你不知道的Canvas(二) 一.色彩Colors 到目前为止,我们只看到过绘制内容的方法.如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fill ...

  8. 爬虫基本库的使用---requests库

    使用requests---实现Cookies.登录验证.代理设置等操作 处理网页验证和Cookies时,需要写Opener和Handler来处理,为了更方便地实现这些操作,就有了更强大的库reques ...

  9. Logback MDC

    Mapped Diagnostic Contexts (MDC)   (译:诊断上下文映射) Logback的设计目标之一是审计和调试复杂的分布式应用程序.大多数实际的分布式系统需要同时处理来自多个客 ...

  10. CSPS模拟 80

    题还没改完就来臭不要脸的写反思了. (主要因为太困了懒得改了) (还因为T2看起来太过弱智) (也许等我生物钟恢复正常后能当做课余消遣水一水) statistic:skyh接了两杯水,真能喝啊 然后他 ...