Vue实现一个学生信息录入系统,实现录入和删除

效果如下:

代码如下:

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Titletitle>
  6     <script src="vue.js">script>
  7 head>
  8 <style>
  9     /* 3.设置样式*/
 10     img{
      width: 100%}
 11     #app{
      
 12         margin: 50px auto;
 13         width: 600px;
 14     }
 15     fieldset{
      
 16         margin-bottom: 30px;
 17         width: 375px;
 18         height: 255px;
 19         position: absolute;
 20         top: 210px;
 21         left: 765px;
 22         border: none;
 23     }
 24     legend{
      
 25         margin-left: 52px;
 26         font-size: 18px;
 27         font-weight: bold;
 28     }
 29     fieldset input{
      
 30         width: 250px;
 31         height: 30px;
 32         margin: 10px 0;
 33         border-radius: 15px;
 34         padding-left: 25px;
 35         outline: none;
 36         border: 1px solid rosybrown;
 37     }
 38     .btn{
      
 39         display: inline-block;
 40         width: 123px;
 41         height: 34px;
 42         float: left;
 43         margin-left: 123px;
 44         border-radius: 15px;
 45         outline: none;
 46     }
 47     table{
      
 48         width: 600px;
 49         text-align: center;
 50         position: absolute;
 51         top: 510px;
 52         left: 660px;
 53     }
 54     thead{
      
 55         background-color: #7d7d7d;
 56     }
 57 style>
 58 <body>
 59 
 64 <div id="app">
 65 
 66     <img src="02.jpg" alt="">
 67     
 68     <fieldset>
 69         <legend>栋梁幼儿园一班学生信息录入系统legend>
 70         <div>
 71             <span>姓名:span>
 72             <input type="text" placeholder="请输入学生姓名" v-model="newStudent.name">  
 73         div>
 74         <div>
 75             <span>年龄:span>
 76             <input type="text" placeholder="请输入学生年龄" v-model="newStudent.age">
 77         div>
 78 
 79         <div>
 80             <span>手机:span>
 81             <input type="text" placeholder="请输入家长手机" v-model="newStudent.phone">
 82         div>
 83         <div>
 84             <span>性别span>
 85             <select name="" id="" v-model="newStudent.sex">
 86                 <option value="男">option>
 87                 <option value="女">option>
 88             select>
 89         div>
 90         
 91         <button @click="createNewStudent()" class="btn">点击录入学生信息button>
 92     fieldset>
 93     
 94     <table>
 95         <thead>
 96         <tr>
 97             <td>学生姓名td>
 98             <td>学生年龄td>
 99             <td>学生性别td>
100             <td>家长手机td>
101             <td>删除td>
102         tr>
103         thead>
104         <tbody>
105             <tr v-for="(p,index) in persons">
106                 <td>{
     {p.name}}td>
107                 <td>{
     {p.age}}td>
108                 <td>{
     {p.sex}}td>
109                 <td>{
     {p.phone}}td>
110                 <td>
111                     <button @click="deleteStudentMsg(index)">删除button> 
112                 td>
113             tr>
114 
115         tbody>
116     table>
117 div>
118 body>
119 <script>
120     var vm = new Vue({
121         el:'#app',
122         data:{
123             //2.创建数据
124             persons:[
125                 {name:"西门吹雪", age:"4", sex:"", phone:"15078950533"},
126                 {name:"常德帥", age:"6", sex:"", phone:"15878950533"},
127                 {name:"尤幼倩", age:"7", sex:"", phone:"15078950533"},
128                 {name:"董得多", age:"5", sex:"", phone:"15078950533"}
129             ],
130             // 5 创建一条空的新对象
131             newStudent:{name:'', age:'0', sex:'', phone:''}
132         },
133         //4.实现创建新用户的逻辑代码
134         //逻辑:创建一个对象,存放到建立好的数组中,然后添加到展示栏即可
135         //先要获取到创建新用户的点击按钮进行监听
136         methods:{
137             // 4.1 创建一条新记录
138             createNewStudent(){
139                 // 8 验证输入框姓名,实现不能为空创建
140                 if(this.newStudent.name === ''){
141                     alert('学生姓名不能为空哦');
142                     return;  //一旦姓名为空,不再执行创建用户的操作
143                 }
144 
145                 // 8.1 验证输入框年龄不能小于0,实现不能为空创建
146                 if(this.newStudent.age <= 0){
147                     alert('请输入正确的年龄');
148                     return;
149                 }
150 
151                 // 8.1 验证输入框手机号码不能为空,实现不能为空创建
152                 if(this.newStudent.phone === ''){  //应该通过正则验证手机号码的格式,这里只是验证不能为空
153                     alert('请输入正确的手机号码');
154                     return;
155                 }
156 
157              //4.2拿到前面的数组,把新建的对象放进去,
158                 // 4.2并且产生的时候应该是排列在数组的最前面,使用数组的.persons.unshift()方法实现这个功能
159                 // 4.2往数组中创建一条新内容
160                 this.persons.unshift(this.newStudent);//4.2此时不管输入框是否存在有效值,点击button按钮都会不停是创建新用户
161                                                         //4.2所以要设置如果没有值的时候不能继续插入新的值
162 
163                 //7.1清空数据,实现创建新用户之后把输入框的内容清空,但是此时依然可以创建空的数据
164                 this.newStudent = {name:'', age:1, sex:'', phone:''}
165             },
166 
167             //9.点击删除按钮的时候删除一条学生信息记录
168             //实现原理:获取到数组,从数组中删除,
169             //想要从数组中删除一条数据需要一条索引
170             deleteStudentMsg(index){
171                 this.persons.splice(index,1);
172             }
173         },
174     });
175 script>
176 html>

 

转载于:https://www.cnblogs.com/wuhefeng/p/10007266.html

你可能感兴趣的:(javascript)