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勾选指定name的复选框集合并显示的方法
May 18 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
js实现自定义进度条效果
Mar 15 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
微信小程序云开发之使用云函数
May 17 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
vue中activated的用法
Jan 03 Vue.js
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基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Symfony核心类概述
2016/03/17 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python实现的knn算法示例
2018/06/14 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
生日宴会答谢词
2014/01/09 职场文书
服装促销活动方案
2014/02/23 职场文书
经管应届生求职信范文
2014/05/18 职场文书
男性健康日的活动方案
2014/08/18 职场文书
煤矿安全保证书
2015/02/27 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
AJAX实现省市县三级联动效果
2021/10/16 Javascript