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实现简单学生信息管理案例的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： oracle 查看服务器密码修改,如何修
- 下一篇： vue是什么软件_Angular vs