html写学生信息管理,vue实现简单学生信息管理案例

学生信息管理

#app{

margin: 10px;

}

学号：

姓名：

搜索姓名关键字：

学号姓名添加时间操作

{{item.stuNo}}{{item.name}}{{item.cTime | dateFormat}}删除

// 自定义自动获取焦点的全局指令

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}`

}

})

标签：stuNo,vue,name,item,信息管理,案例,nbsp,dateStr,var

来源： https://www.cnblogs.com/zhahuhu/p/11618599.html

html写学生信息管理,vue实现简单学生信息管理案例相关推荐

Vue实现简单聊天对话框案例
功能:实现双人简单聊天对话框,见效果图代码如下: <!DOCTYPE html> <html lang="en"><head><meta ...
实践hibernate的应用——struts2+hibernate的简单学生信息管理
struts2+hibernate的简单学生信息管理,没有用很好的界面,目的主要是为了实践一下hibernate框架的学习,深入了解hibernate框架. 下面是项目的目录: 配置文件hiberna ...
学生信息管理项目（简单）
②图要求用c语言写此项目,那我就巩固一下我的python吧!首先,我在mysql中创建了stuinfo表,如①图所示,然后通过python中的pysql模块进行连接: import pymysql # ...
用python制作一个学生信息管理软件_python实现简单学生信息管理系统
python简单的学生信息管理系统-文件版,供大家参考,具体内容如下功能如下主函数部分增加学生信息修改学生信息删除学生信息查询学生显示所有学生的信息将数据录入文件读取文件数据学习文 ...
C语言学生成绩简单,C语言实现简单学生成绩管理系统.pdf
C语言实现简单学生成绩管理系统这篇文章主要为大家详细介绍了C语言实现简单学生成绩管理系统,具有定的参考价值,感兴趣的小伙伴们可以参考下本文实例为大家分享了C语言实现学生成绩管理系统的具体代码 ...
双链表嵌套的简单学生信息管理系统
参考:实现双链表嵌套的简单学生信息管理作者:三速何时sub20 发布时间: 2020-07-20 10:44:40 网址:https://blog.csdn.net/weixin_44234294/ ...
ssm+Vue计算机毕业设计学生网上请假系统（程序+LW文档）
ssm+Vue计算机毕业设计学生网上请假系统(程序+LW文档) 项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclis ...
java简单学生成绩系统_JAVA 实现简单的学生成绩管理系统
一.实验目的 1．掌握java的类与对象的基本概念: 2．掌握简单的信息管理系统的设计与实现. 二.实验环境实验建议在安装了以下软件的计算机上完成: 1. Windows xp/win7 ...
JAVA 控制台式简单学生选课系统
学校要求做个小作业,查了好多资料都找不到能参考的,只好自己写了一套,供给需要的同学进行参考. 仅供参考编写一个基于命令行的选课系统,系统包含一个主菜单 //1.录入课程信息(可以反复多次录入多个课程 ...

html写学生信息管理,vue实现简单学生信息管理案例

html写学生信息管理,vue实现简单学生信息管理案例相关推荐

最新文章

热门文章