效果如下：

代码如下：

 <!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. 5、Python 基础类型 -- Dictionary 字典类型

    字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中 ,格式如下所示: d ...

  2. leetcode-161周赛-1247-交换字符使得字符串相同

    题目描述: 自己的提交: class Solution: def minimumSwap(self, s1: str, s2: str) -> int: count = {"xy&qu ...

  3. Android 在OnCreate()中获取控件高度与宽度

    试过在OnCreate()中获取控件高度与宽度的童鞋都知道,getWidth()与getHeight()方法返回是0,具体原因 看一下Activity的生命周期 就会明白. 上代码: 方法一: int ...

  4. [bzoj2510]弱题 (循环矩阵优化dp)

    Description 有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M),若这个 ...

  5. RN 0.6以后react-navigation 导航报错null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')

    很久没用RN了之前用的时候还是很早的版本,现在有了很大的变化,感觉比之前成熟了很多重新看下.先整下导航 参考地址:https://reactnavigation.org/docs/en/getting ...

  6. 第十四届华中科技大学程序设计竞赛--J Various Tree

    链接:https://www.nowcoder.com/acm/contest/106/J来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...

  7. 剑指offer——68队列的最大值

    题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6 ...

  8. ThinkPHP5验证码不显示的原因及解决方法

    其实很久之前刚学习tp5框架的时候就遇到了这个问题,解决完后一直没再出过问题,今天用以前的框架做新项目时又碰到了这个问题,这里记录一下 问题原因: 1.TP5本就存在这个bug 2.数据库连接不正常( ...

  9. Python 变量作用域 LEGB （下）—— Enclosing function locals

    上篇:Python 变量作用域 LEGB (上)—— Local,Global,Builtin https://www.cnblogs.com/yvivid/p/python_LEGB_1.html ...

  10. 4-vim-工作模式-01-职责以及切换模式

    vi 有三种工作模式 1.命令模式 打开文件首先进入命令模式,是使用vi的入口. 通过命令对文件进行常规的编辑操作,例如:定位-翻页-复制-粘贴-删除等. 在其他图形编辑器下,通过快捷键或鼠标实现的操 ...