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可以分别进行学生信息的 ...
随机推荐
- 重视项目排期，对dateline 有所敬畏
项目排期 = 个人任务完成 + 风险预估 + 意外情况 + 项目上下游依赖 个人任务完成 个人任务具体话 不要考虑私人情感,专注工作 风险预估 对可能出现的情况进行考虑 意外情况 对出现的意外情况提前 ...
- Delphi 消息函数 SendMessage函数和 PostMessage的区别
SendMessage函数 将指定的消息发到窗口.它调用特定窗口的窗口处理函数,并且不会立即返回,直到窗口处理函数处理了这个消息. PostMessage函数 将一个消息放入与创建这个窗口的消息队列相 ...
- Vue学习笔记【16】——vue-resource 实现 get, post, jsonp请求
除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中,如何发起数据请求?原生.jQuery,需要操作DOM 常见的数据请求类型? get post ...
- lvs+keepalived+mariadb集群
1.环境准备节点1:172.16.2.95节点2:172.16.2.160节点3:172.16.2.220LVS1:172.16.2.67LVS2:172.16.2.234 2.mariadb集群的安 ...
- springboot之停止与启动服务的脚本
最近要开始自动化部署了,我们要编写杀死服务的脚本. 我在windows写好的脚本拷贝到linux,就是不行,好像是因为转义字符吧. 然后,我就手敲了这个下面脚本: pid=`ps -ef|grep / ...
- js监听input输入字符变化
<p class="text-input"> <input type="text" id="username" autoC ...
- checkbox、radio使用jquery改变状态以及其他操作
$('input[type=checkbox]:checked').each(function(index,elem){ $(elem).attr("checked",false) ...
- （转）C#中String跟string的“区别”
string是c#中的类,String是.net Framework的类(在C# IDE中不会显示蓝色) C# string映射为.net Framework的String 如果用string,编译器 ...
- 修改 Chrome浏览器主页被劫持 chrome 主页被篡改成hao.qquu8.com的解决方案
1. 开始菜单输入‘g'找到 Google Chrome浏览器 2. 修改属性->目标,将 chrome.exe hao.qquu8.com 后面的网址去掉,如图:
- 技巧&注意事项合集
技巧&注意事项合集 杂项 OI Wiki有很多实用的东西 编程环境 打开Dev-C++中工具-编译选项-代码生成/优化-代码警告-显示最多警告信息的开关,可以检查出一堆傻逼错误 define ...