效果如下：

代码如下：

 <!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实现一个学生信息录入系统，实现录入和删除的更多相关文章

  1. 学习完vue指令 做的一个学生信息录入系统

    一.demo实现原理 输入完个人信息后  点击创建用户  数据就会显示在下面的表格中 用到了vue中的数据双向绑定 v-model v-for 还要js正则 数组的unshift splice 等方法 ...

  2. javeweb_学生信息添加系统

    在text.jsp中画出界面,以及设置提交选项的限制 <%@ page language="java" contentType="text/html; charse ...

  3. python写一个学生信息管理系统

    #coding:utf-8 2 info = []#全局变量 3 def info_print(): 4 print("请选择功能:") 5 print("1:添加学员& ...

  4. 一个低级shell简易学生信息管理系统-新增登陆注册功能

    还有bug 不修改了 小声bb一下 这玩意真的要控制版本 随手保存 本来有个超完整的版本 一开心被我rm - f 了 后续还出现了 更多的bug 仔细仔细 源码如下: record=stu.db if ...

  5. 大一C语言结课设计之《学生信息管理系统》

    第一次写这么长的程序,代码仅供參考,有问题请留言. /* ** 学生信息管理系统 ** IDE:Dev-Cpp 4.9.9.2 ** 2014-6-15 */ #include <stdio.h ...

  6. 关于搬运CSDN上学生信息管理系统的阅读与二次开发

    关于本篇博客内容,我大概分成了三个部分进行讲述:对于源代码的解读.二次重开发后程序的介绍和自己在做完对他人代码的解读和重开发后自己的一些感想. 一.  源代码的解读 在本部分的解读中主要分为三部分:该 ...

  7. Android（java）学习笔记195：学生信息管理系统案例（SQLite + ListView）

    1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...

  8. 学生信息管理系统-顺序表&&链表（数据结构第一次作业）

    实验目的 : 1 .掌握线性表的定义: 2 .掌握线性表的基本操作,如建立.查找.插入和删除等. 实验内容: 定义一个包含学生信息(学号,姓名,成绩)的的 顺序表和链表,使其具有如下功能: (1) 根 ...

  9. 【转载】C语言综合实验1—学生信息管理系统

    http://www.cnblogs.com/Anker/archive/2013/05/06/3063436.html 实验题目:学生信息管理系统 实验要求:用户可以选择1-7可以分别进行学生信息的 ...

随机推荐

  1. mongodb的学习 （2）

    1.条件查询 查询姓名为小明的学生                            db.local.find({name:'小明'});; 查询英语成绩大于90分的同学            ...

  2. 记录常用的linux命令

    原文链接:https://www.cnblogs.com/suger43894/p/11024594.html 系统信息相关 date 显示系统日期 cat /proc/mounts 显示已加载的文件 ...

  3. PHP ftp_login() 函数

    定义和用法 ftp_login() 函数登录 FTP 服务器. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE 和一个警告. 语法 ftp_login(ftp_connection,us ...

  4. STM32嵌入式开发学习笔记（六）：串口通信（上）

    本文我们将了解STM32与外部设备通过串口通信的方式. 所谓串口通信,其实是一个类似于计算机网络的概念,它有物理层,比如规定用什么线通信,几伏特算高电平,几伏特算低电平.传输层,通信前要发RTS,CT ...

  5. Java学习之集合（LinkedList链表集合）

    一.什么是链表集合,通过图形来看,比如33只知道它下一个是55 如果:现在要删除33的话,就是把55赋值给45,这样看它操作集合速度会非常快. 二.LinkedList特有方法 1.添加 addFir ...

  6. Java学习之classpath

    要运行class文件,必须在class文件所在的目录下,那么是不是也可以通过设置系统变量来配置呢,当然有了classpath就来了 环境变量配置有两种 1.一劳永逸的 2.set 临时变量 我们用临时 ...

  7. [转] JPA 2.0 with EclipseLink - 教程

    原文: http://www.vogella.com/articles/JavaPersistenceAPI/article.html Lars Vogel Version 2.2 Copyright ...

  8. Dubbo入门到精通学习笔记（十二）：Dubbo消费端直连提供者（开发调试）、Dubbo服务只订阅（开发调试）、Dubbo服务只注册

    文章目录 Dubbo消费端直连提供者(开发调试) Dubbo服务只订阅(开发调试) Dubbo服务只注册 Dubbo消费端直连提供者(开发调试) Dubbo 官方文档: 用户指南 >> 示 ...

  9. Linux用户空间内存区域的匿名映射

    1 在调用mmap系统调用时,可以指定的标志(flag)参数: 1: #define MAP_SHARED 0x01 /* Share changes */ 2: #define MAP_PRIVAT ...

  10. SDUTOJ 2498 数据结构实验之图论十一：AOE网上的关键路径

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/2498.html 题目大意 略. 分析 ...