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可以分别进行学生信息的 ...
随机推荐
- 非关系型数据库MongoDB入门
本文分为以下四块简单介绍非关系型数据库MongoDB:1.MongoDB简介.2.MongoDB和关系数据库对比.3.MongoDB基本概念.4.mongo shell的使用以及对MongoDB的增删 ...
- SQL关于:警告: 聚合或其他 SET 操作消除了空值。
方法一: create table tb ( id int, num int ) insert into tb select 1,10 insert into tb select 1,20 inser ...
- 75. InputStreamReader和OutputStreamWriter（转换流--字节流转换成字符流）
转换流: InputStreamReader 输入字节流转换成输入字符流OutputStreamWriter 输出字节流转换成输出字符流 总结:就是字节流转换成字符流,但是不能字节流转换成字节流 ...
- HTML5 原生API input file 来实现多图上传，并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
- 屏幕尺寸，分辨率，PPI，像素之间的关系
什么是屏幕尺寸? 华为荣耀7的尺寸是5.2英寸.这个5.2英寸是手机屏幕对角线的长度. 1英寸(inch)=2.54厘米(cm) 什么是分辨率? 华为荣耀7的分辨率是1920PX*1080PX.像素是 ...
- 暴力枚举+扫描线+线段树——cf1194E
/*思路就是枚举矩形下面那条先,把所有和其交叉的竖线更新进线段树,然后扫描先向上更新,遇到竖线上端点就在线段树里删掉,遇到横线就更新答案*/#include<bits/stdc++.h> ...
- Shell5
sed文本编辑器(vim,notepad)非交互式的文本编辑器sed是逐行处理编辑器 sed [选项] ‘条件指令' 文件 #没有条件指令时,默认对全文所有进行修改sed的所有操作默认时在 ...
- js处理浮点数一点思考
作为一名web开发人员,如果我们做到了涉及到费用加加减减的需求 难免会遇到浮点数的计算,就会遇到浮点数精度误差的问题 假设场景: 1.接口给你的金额单位是分,页面需要展示的金额单位为元. 最后落档金额 ...
- 用 Windows Live Writer 和 SyntaxHighlighter 插件写高亮代码
博客园内置支持SyntaxHighlighter代码着色,代码着色语法:<pre class='brush:编程语言'>代码</pre>. 需要注意的是:如何你使用Syntax ...
- JAVA的IO流下载音乐
public class DownloadMusic { private static int count = 1; public static void main(String[] args) th ...