vue实现学生录入系统之添加删除功能

更新时间：2018年07月11日 10:42:12 作者：夏木炎

本文给大家带来一个小案例基于vue实现学生录入系统功能，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

一.案例代码

<!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实现学生录入系统之添加删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue封装实现自动循环滚动的列表
在做数据大屏开发的过程中,经常出现需要对列表进行自动滚动的需求,所以本文就来为大家介绍一下如何利用vue封装一个自动循环滚动的列表吧
2023-09-09
浅谈在vue-cli3项目中解决动态引入图片img404的问题
这篇文章主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
VUE中的自定义指令钩子函数讲解
这篇文章主要介绍了VUE中的自定义指令钩子函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue中fragment.js使用方法小结
这篇文章主要给大家汇总介绍了Vue中fragment.js使用方法的相关资料,需要的朋友可以参考下
2020-02-02
vue 项目全屏插件screenfull使用案例
这篇文章主要介绍了vue 项目全屏插件screenfull使用案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue3通过ref操作Dom元素及hooks的使用方法
这篇文章主要介绍了Vue3通过ref操作Dom元素及hooks的使用方法,需要的朋友可以参考下
2023-01-01
vue-element-admin 登陆及目录权限控制的实现
本文主要介绍了vue-element-admin 登陆及目录权限控制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
详解 vue.js用法和特性
Vue.js目前已经更新到2.x，功能和语法上有一定升级和修改，本文首先介绍基础内容。感兴趣的朋友一起看看吧
2017-10-10
详解vue项目构建与实战
这篇文章主要介绍了详解vue项目构建与实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue中使用js制作进度条式数据对比动画
这篇文章主要为大家详细介绍了Vue中使用js制作进度条式数据对比动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03