Vue实现一个学生信息录入系统，实现录入和删除
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<style>
/* 3.设置样式*/
img{width: 100%}
#app{
margin: 50px auto;
width: 600px;
}
fieldset{
margin-bottom: 30px;
width: 375px;
height: 255px;
position: absolute;
top: 210px;
left: 765px;
border: none;
}
legend{
margin-left: 52px;
font-size: 18px;
font-weight: bold;
}
fieldset input{
width: 250px;
height: 30px;
margin: 10px 0;
border-radius: 15px;
padding-left: 25px;
outline: none;
border: 1px solid rosybrown;
}
.btn{
display: inline-block;
width: 123px;
height: 34px;
float: left;
margin-left: 123px;
border-radius: 15px;
outline: none;
}
table{
width: 600px;
text-align: center;
position: absolute;
top: 510px;
left: 660px;
}
thead{
background-color: #7d7d7d;
}
</style>
<body>
<!--
功能是基于vue的常用指令实现
v-on
v-model
-->
<div id="app">
<!-- 1.页面搭建-->
<img src="02.jpg" alt="">
<!--录入信息页-->
<fieldset>
<legend>栋梁幼儿园一班学生信息录入系统</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="请输入学生姓名" v-model="newStudent.name"> <!-- 6.使用v-model实现双向绑定,绑定之后就可以有效值创建，但是此时输入框中的数据不会自动清空-->
</div>
<div>
<span>年龄：</span>
<input type="text" placeholder="请输入学生年龄" v-model="newStudent.age">
</div> <div>
<span>手机：</span>
<input type="text" placeholder="请输入家长手机" v-model="newStudent.phone">
</div>
<div>
<span>性别</span>
<select name="" id="" v-model="newStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<!-- 4.2 调用创建新用户的方法-->
<button @click="createNewStudent()" class="btn">点击录入学生信息</button>
</fieldset>
<!--学生信息详情展示栏-->
<table>
<thead>
<tr>
<td>学生姓名</td>
<td>学生年龄</td>
<td>学生性别</td>
<td>家长手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.phone}}</td>
<td>
<button @click="deleteStudentMsg(index)">删除</button> <!--10. 调用删除数据的方法 index:索引-->
</td>
</tr> </tbody>
</table>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
//2.创建数据
persons:[
{name:"西门吹雪", age:"4", sex:"男", phone:"15078950533"},
{name:"常德帥", age:"6", sex:"男", phone:"15878950533"},
{name:"尤幼倩", age:"7", sex:"男", phone:"15078950533"},
{name:"董得多", age:"5", sex:"男", phone:"15078950533"}
],
// 5 创建一条空的新对象
newStudent:{name:'', age:'0', sex:'男', phone:''}
},
//4.实现创建新用户的逻辑代码
//逻辑：创建一个对象，存放到建立好的数组中，然后添加到展示栏即可
//先要获取到创建新用户的点击按钮进行监听
methods:{
// 4.1 创建一条新记录
createNewStudent(){
// 8 验证输入框姓名，实现不能为空创建
if(this.newStudent.name === ''){
alert('学生姓名不能为空哦');
return; //一旦姓名为空，不再执行创建用户的操作
} // 8.1 验证输入框年龄不能小于0，实现不能为空创建
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
} // 8.1 验证输入框手机号码不能为空，实现不能为空创建
if(this.newStudent.phone === ''){ //应该通过正则验证手机号码的格式，这里只是验证不能为空
alert('请输入正确的手机号码');
return;
} //4.2拿到前面的数组，把新建的对象放进去，
// 4.2并且产生的时候应该是排列在数组的最前面,使用数组的.persons.unshift()方法实现这个功能
// 4.2往数组中创建一条新内容
this.persons.unshift(this.newStudent);//4.2此时不管输入框是否存在有效值，点击button按钮都会不停是创建新用户
//4.2所以要设置如果没有值的时候不能继续插入新的值 //7.1清空数据，实现创建新用户之后把输入框的内容清空，但是此时依然可以创建空的数据
this.newStudent = {name:'', age:1, sex:'', phone:''}
}, //9.点击删除按钮的时候删除一条学生信息记录
//实现原理：获取到数组，从数组中删除，
//想要从数组中删除一条数据需要一条索引
deleteStudentMsg(index){
this.persons.splice(index,1);
}
},
});
</script>
</html>
Vue实现一个学生信息录入系统，实现录入和删除的更多相关文章
- 学习完vue指令 做的一个学生信息录入系统
一.demo实现原理 输入完个人信息后 点击创建用户 数据就会显示在下面的表格中 用到了vue中的数据双向绑定 v-model v-for 还要js正则 数组的unshift splice 等方法 ...
- javeweb_学生信息添加系统
在text.jsp中画出界面,以及设置提交选项的限制 <%@ page language="java" contentType="text/html; charse ...
- python写一个学生信息管理系统
#coding:utf-8 2 info = []#全局变量 3 def info_print(): 4 print("请选择功能:") 5 print("1:添加学员& ...
- 一个低级shell简易学生信息管理系统-新增登陆注册功能
还有bug 不修改了 小声bb一下 这玩意真的要控制版本 随手保存 本来有个超完整的版本 一开心被我rm - f 了 后续还出现了 更多的bug 仔细仔细 源码如下: record=stu.db if ...
- 大一C语言结课设计之《学生信息管理系统》
第一次写这么长的程序,代码仅供參考,有问题请留言. /* ** 学生信息管理系统 ** IDE:Dev-Cpp 4.9.9.2 ** 2014-6-15 */ #include <stdio.h ...
- 关于搬运CSDN上学生信息管理系统的阅读与二次开发
关于本篇博客内容,我大概分成了三个部分进行讲述:对于源代码的解读.二次重开发后程序的介绍和自己在做完对他人代码的解读和重开发后自己的一些感想. 一. 源代码的解读 在本部分的解读中主要分为三部分:该 ...
- Android（java）学习笔记195：学生信息管理系统案例（SQLite + ListView）
1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...
- 学生信息管理系统-顺序表&&链表（数据结构第一次作业）
实验目的 : 1 .掌握线性表的定义: 2 .掌握线性表的基本操作,如建立.查找.插入和删除等. 实验内容: 定义一个包含学生信息(学号,姓名,成绩)的的 顺序表和链表,使其具有如下功能: (1) 根 ...
- 【转载】C语言综合实验1—学生信息管理系统
http://www.cnblogs.com/Anker/archive/2013/05/06/3063436.html 实验题目:学生信息管理系统 实验要求:用户可以选择1-7可以分别进行学生信息的 ...
随机推荐
- Hive速览
一.概述 Hive由Facebook开源,是一个构建在Hadoop之上的数据仓库工具 将结构化的数据映射成表 支持类SQL查询,Hive中称为HQL 1.读模式 2.Hive架构 3.使用Hive的原 ...
- Mysql学习笔记（004）- 条件查询
条件查询 #进阶2:条件查询 /* 语法: select 查询列表③ from 表名① where 条件筛选② 分类: 一.按条件表达式筛选 条件运算符:> < = != <> ...
- 分布式项目中Spring security自定义权限类
package cn.lijun.core.service; import cn.lijun.core.pojo.seller.Seller;import org.springframework.se ...
- Java打war包or打jar包
//一个jar包可以包含多个entry,这样就能实现下面功能 1.I/O 读文件流步骤 File file=new File(filePath); ...
- 51Nod 1600 Simple KMP 解题报告
51Nod 1600 Simple KMP 对于一个字符串\(|S|\),我们定义\(fail[i]\),表示最大的\(x\)使得\(S[1..x]=S[i-x+1..i]\),满足\((x<i ...
- 【Flutter学习】基本组件之基本列表ListView组件
一,概述 列表是前端最常见的需求. 在flutter中,用ListView来显示列表页,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向,列别有以下分类 水平列表 垂直列表 数据量非常大的列表 ...
- stl+数论——1247D
其实也不算很难想,每个元素质因子分解后的p^c的p和c用pair的形式存在每个元素vector里 要去前面找一个数使得所有指数相加是k的倍数,那么把vector里的所有c 模 k,然后去找前面互补的数 ...
- Linux命令篇-服务器查看日志(续)
此文是继上文如何在服务器看日志的续集.之所以我觉得自己很菜,是因为我的周围都是大佬,他们都是值得我学习的对象. 通常大家看日志,无非两种,一是more命令,一是tail命令,其中的过程要么是翻页查看, ...
- java Logger 类
package org.rx.common; import org.slf4j.LoggerFactory; import java.util.Collections; import java.uti ...
- 4. Python数据类型之数字、字符串、列表
开发过程中,我们需要处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数据类型.在Python中,能够直接处理的数据类型主要有以下几种:数字.字符串.列表.元组.字典.集合等 ...