一.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. mysql数据库limit分页，排序操作

    看到网上很多朋友在问,limit分页之后按照字段属性排序的问题,在这里分享一下我的用法: 1.网上答案: 每页显示5个,显示第三页信息,按照年龄从小到大排序 select * from student ...

  2. WPF_在APP.xaml应用资源样式

    先上代码: <Application x:Class="NetAnalysis.App" xmlns="http://schemas.microsoft.com/w ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. Redis备忘(二)

    内存回收: 有时候发现10g的Redis删掉1g的key,内存占用没啥变化,因为内存页分配,有的页面可能还存在key,整个页面不能回收. 主从同步: CAP原理:一致性 可用性 分区容忍性 redis ...

  5. CasperJS 前端功能测试

    CasperJS 是一个开源的导航脚本和测试组件.它提供实用的高级函数.方法和语法糖,可完成以下任务: 对浏览导航步骤的定义和排序 填写和提交表单 点击和跟踪链接 获取页面快照(或者页面中的某部分) ...

  6. pycharm的使用（day03复习整理）

    pycharm的使用 file --> settings --> editor -->general --> change font size .... file --> ...

  7. SpringBoot与MybatisPlus整合之公用字段填充(十一)

    在实际开发中,适合用于记录创建人修改人 pom.xml <dependencies> <dependency> <groupId>org.springframewo ...

  8. Docker安装ElasticSearch 以及使用LogStash实现索引库和数据库同步

    1:下载 ElasticSearch 镜像 docker pull docker.io/elasticsearch:5.6.8 2:创建 ElasticSearch 容器: 注意:5.0默认分配jvm ...

  9. Python中使用字典的几个小技巧

    1 解包 所谓解包,就是将字典通过 ** 操作符转为 Key=Value 的形式,这种形式可以直接传给函数作为关键字参数. 说说适用的几种情况. 1.1 搜索拼接条件 当应用中使用类似 SQLAlch ...

  10. API gateway 之 kong 基本操作 （三）

    一.演示环境准备 1.nginx配置 [root@nginx conf.d]# pwd /etc/nginx/conf.d [root@nginx conf.d]# ls conf_bak kong_ ...