一.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. idea的tomcat实现热部署遇到的问题

    选择Deployment的时候,要选择exploded结尾的,否则不支持热部署

  2. Python 依赖库管理哪家强？pipreqs、pigar、pip-tools、pipdeptree 任君挑选

    在 Python 的项目中,如何管理所用的全部依赖库呢?最主流的做法是维护一份"requirements.txt",记录下依赖库的名字及其版本号. 那么,如何来生成这份文件呢?在上 ...

  3. carousel.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. split分割文件与数据

    split主要用途:在之前计算机发展的时候,我们必须分割文件,才能将大量数据放入多张软盘中,而今我们分割文件有了其他的目的,比如提高可读性,生成日志以及发送有大小限制的E-mail附件. 工作原理:s ...

  5. URL百分号编码

    百分号编码是什么! 百分号编码(Percent-Encoding)也被称为 URL 编码,是一种编码机制.该机制主要应用于 URI 编码中,URI 包含 URL 和 URN,所以它们也同样适用.除此之 ...

  6. PLSQL Developer 超简单使用！！！

    PLSQL Developer 简介 PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对 ...

  7. Microsoft.Extensions.DependencyInjection 之三：反射可以一战（附源代码）

    目录 前文回顾 IServiceCallSite CallSiteFactory ServiceProviderEngine CompiledServiceProviderEngine Dynamic ...

  8. vue学习之深入响应式原理

    vue的响应式原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全 ...

  9. 高可用架构的实现--dubbo+zookeeper+maven+tomcat

    最近在做分布式的服务架构搭建,因为自己确实很喜欢搞这种技术类的研究,所以在公司需要的时候主动承担了这项光荣而艰巨的任务.公司搭建的架构主要目的是需要支持后端接口的多用户的高并发访问,希望能够达到每秒并 ...

  10. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...