vue实现简单学生信息管理


Posted in Javascript onMay 30, 2020

本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>学生信息管理</title>
 <link rel="stylesheet" href="./lib/bootstrap.css" >
 <script src="./lib/vue.js"></script>
 <style type="text/css">
 #app{
  margin: 10px;
 }
 </style>
</head>
<body>
<div id="app">
 <form class="form-inline">
 <div class="form-group">
  <label>学号:</label>
  <input type="text" class="form-control" v-model="stuNo">
 </div>  
 <div class="form-group">
  <label>姓名:</label>
  <input type="email" class="form-control" v-model="name" @keyup.enter="add">
 </div> 
 <input type="button" class="btn btn-primary" value="添加" @click="add">
     
 <div class="form-group">
  <label>搜索姓名关键字:</label>
  <input type="email" class="form-control" v-model="keywords" @keyup.enter="search(keywords)" v-focus>
 </div>
 </form>
 <br/>
 <table class="table table-bordered" >
 <thead>
 <th>学号</th>
 <th>姓名</th>
 <th>添加时间</th>
 <th>操作</th>
 </thead>
 <tbody v-for="(item,i) in search(keywords)" :key="item.stuNo" >
 <tr>
  <td>{{item.stuNo}}</td>
  <td>{{item.name}}</td>
  <td>{{item.cTime | dateFormat}}</td>
  <td><a href="" @click.prevent=" del(item.stuNo)">删除</a></td>
 </tr>
 </tbody>
 </table>
</div>

<script>
 // 自定义自动获取焦点的全局指令
 Vue.directive('focus',{
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
 })
 var vm = new Vue({
 el:'#app',
 data:{
  stuNo:'',
  name:'',
  keywords:'',
  list:[
  {
   stuNo:1710204016,
   name:'刘小红',
   cTime:new Date()
  },
  {
   stuNo:1710204007,
   name:'李大明',
   cTime:new Date()
  }
  ]
 },
 methods:{
  add(){
  var newInfo = {stuNo:this.stuNo, name:this.name, cTime:new Date()}
  this.list.push(newInfo)
  this.stuNo=this.name=''
  },
  del(stuNo){
  this.list.some((item,i)=>{
   if(item.stuNo===stuNo){
   this.list.splice(i,1)
   return true;
   }
  })
  },
  search(keywords){
  // var newList = []
  // this.list.forEach(item=>{
  // if(item.name.indexOf(keywords)!=-1){
  //  newList.push(item)
  // }
  // })
  // return newList
  return this.list.filter(item=>{
   if(item.name.includes(keywords)){
   return item
   }
  })
  }
 },
 filters:{
  dateFormat:function(dateStr){
  var year = dateStr.getFullYear()
  var mouth = (dateStr.getMonth() + 1).toString().padStart(2,'0')
  var date = (dateStr.getDate()).toString().padStart(2,'0')
  var h = (dateStr.getHours()).toString().padStart(2,'0')
  var m = (dateStr.getMinutes()).toString().padStart(2,'0')
  var s = (dateStr.getSeconds()).toString().padStart(2,'0')
  return `${year}-${mouth}-${date} ${h}:${m}:${s}`
  }
 }
 })
</script>
</body>
</html>

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
javascript常用的正则表达式实例
May 15 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
vue实现学生信息管理系统
May 30 #Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
vue实现信息管理系统
May 30 #Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
You might like
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php实现将Session写入数据库
2015/07/26 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python实现二分查找算法实例
2015/05/26 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
二审答辩状范文
2015/05/22 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
《观察物体》教学反思
2016/02/17 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
python脚本框架webpy模板赋值实现
2021/11/20 Python
Python日志模块logging用法
2022/06/05 Python