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


Posted in Javascript onJuly 11, 2018

一.案例代码

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

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 #Javascript
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php日历[测试通过]
2008/03/27 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
飞利浦美国官网:Philips美国
2020/02/28 全球购物
通用C#笔试题附答案
2016/11/26 面试题
编辑个人求职信范文
2013/09/21 职场文书
农民致富事迹材料
2014/01/23 职场文书
工作态度检讨书
2014/02/11 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis