效果如下：

代码如下：

 <!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. 39th 迷迷糊糊 二豆玩不转了

    今天学的语法 1.   #  {} . format()的传送作用 请从键盘获取一个整数,求他的平方根,要求: 1 如果这个整数是大于等于0,则直接打印其平方根 2 否则, 打印其绝对值的平方根 x ...

  2. h5开发与pc开发的差异性

    1. viewport 将layout viewport 设置成ideal viewport . width=device-width,也可以设置 initial-scale=1,最好两者都有. wi ...

  3. Ubuntu图形界面和终端界面切换快捷键

    Ctrl+Alt+F1可以从图形界面切换到终端界面. Ctrl+Alt+F7可以从终端界面退出来,重新回到图形界面

  4. springboot集成使用rabbitmq笔记(1.rabbitmq安装)

    使用rabbitmq笔记一 使用rabbitmq笔记二 使用rabbitmq笔记三 1.选择适配的版本,参考---https://www.rabbitmq.com/which-erlang.html ...

  5. JavaWeb开发中遇到的错误:org.apache.catalina.core.StandardWrapperValve invoke

    org.apache.catalina.core.StandardWrapperValve invoke 今天写代码,竟然接连遇到这个异常好几次.debug几个小时才弄明白,晕. 上网找了些拼凑下做个 ...

  6. 二维差分前缀和——cf1202D(好题）

    直接枚举每个点作为左上角是可以做的,但是写起来较麻烦 有一种较为简单的做法是对一列或一行统计贡献 比如某一行的B存在的区间是L,R那么就有三种情况 1.没有这样的区间,即一行都是W,此时这行对答案的贡 ...

  7. 画山 paint

    画山 paint 有一张大小为n*m的白纸,小R想在纸上画一片绵延的群山. 为了描述方便,我们将纸张表示在坐标系上,四个顶点的坐标分别为(0,0),(n,0),(0,m),(n,m). 小R有一只神奇 ...

  8. CF 1097D - Hello 2019 D题: Makoto and a Blackboard

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门  Portal  原题目描述在最下面.  给一个数n ...

  9. 4.2.1 Vector bit-select and part-select addressing

    Frm:IEEE Std 1364™-2001, IEEE Standard Verilog® Hardware Description Language Bit-selects extract a ...

  10. 机器学习技法笔记：Homework #6 AdaBoost&Kernel Ridge Regression相关习题

    原文地址:http://www.jianshu.com/p/9bf9e2add795 AdaBoost 问题描述 程序实现 # coding:utf-8 import math import nump ...