vue实现学生录入系统之添加删除功能
2018-07-11 10:42
981 查看
一.案例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset input{ width: 200px; height: 30px; margin: 10px 0; } table{ width: 620px; border: 2px solid plum; text-align: center; } thead{ background-color: plum; } </style> </head> <body> <div id="app"> <fieldset> <legend>学生录入系统</legend> <div> <span>姓名:</span> <input type="text" placeholder="请输入姓名" v-model="student.name"/> <span></span> </div> <div> <span>年龄:</span> <input type="text" placeholder="请输入年龄" v-model="student.age"/> </div> <div> <span>性别:</span> <select v-model="student.sex"> <option value="男">男</option> <option value="女">女</option> </select> </div> <div> <span>QQ:</span> <input type="text" placeholder="请输入QQ" v-model="student.QQ"/> </div> <button @click="createNewStudent()">创建新用户</button> </fieldset> <table> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>QQ</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.QQ}}</td> <td><button @click="deleteStudentMsg(index)">删除</button></td> </tr> </tbody> </table> </div> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script> //1.创建Vue的实例 let vm=new Vue({ el:'#app', data:{ persons:[ {name:'张三',age:16,sex:'男',QQ:'123456'}, {name:'李四',age:17,sex:'男',QQ:'100000'}, {name:'王麻子',age:18,sex:'女',QQ:'666666'}, {name:'赵六',age:19,sex:'男',QQ:'888888'}, {name:'刘七',age:20,sex:'女',QQ:'999999'} ], student:{name:'',age:0,sex:'男',QQ:''} }, methods:{ //创建一条新记录 createNewStudent(){ //姓名不能为空 if(this.student.name==''){ alert('姓名不能为空'); return; } //年龄不能小于0 if(this.student.age<0){ alert('请输入正确年龄'); return; } //QQ if(this.student.age==''){ alert('请输入正确年龄'); return; } //往数组中添加一条新记录 this.persons.unshift(this.student); //清空数据 this.student={name:'',age:0,sex:'男',QQ:''}; }, //删除 deleteStudentMsg(index){ this.persons.splice(index,1); } } }); </script> </body> </html>
二.结果
总结
以上所述是小编给大家介绍的vue实现学生录入系统之添加删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 创建一个学生系统,实现一下功能; * 1:增加学生 * 2:显示学生 * 3:修改学生 * 4:删除学生 * 5:查找学生 * 6:退出程序 * 请输入选择(
- 学生管理系统,用Java代码连接数据实现数据的添加、更新、删除操作
- 设计一个学生成绩管理系统,实现对学生成绩的动态管理,实现对学生成绩的输入,显示,删除,查找,插入,最佳,保存,计算,排序等主要功能
- vue实现添加删除,筛选,还有自定义全局过滤器的功能
- 用线性表编写通讯录管理系统 实现添加,查询,修改,删除功能
- 地磅称量系统之(53)在封装对象的类库中实现包括IDataErrorInfo接口提供的所有方法和并且扩展对异常具有添加和删除功能的基本业务对象基类
- 学生信息管理系统—课程设置窗体中怎么一次性添加或删除课程
- 使用Bootstrap和Vue实现用户信息的编辑删除功能
- bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能
- 学生信息记录系统,主要实现增删改查功能,考虑用堆栈、队列来写下
- Jquery实现select multiple左右添加和删除功能
- bootstrap table实现双击可编辑、添加、删除行功能
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- 树形结构的数据库实现,存储过程实现添加删除查询功能
- 利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
- [课程设计]Scrum 2.6 多鱼点餐系统开发进度(下单一览页面-菜式添加功能实现)
- 【学生信息管理系统 2】:无法实现信息的添加
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- 小案例:实现对web端对客户的添加,编辑,删除等数据功能
- vue+element的表格实现批量删除功能