html写学生信息管理,vue实现简单学生信息管理案例
#app{
margin: 10px;
}
學(xué)號(hào)：
??姓名：
?搜索姓名關(guān)鍵字：
學(xué)號(hào)姓名添加時(shí)間操作
{{item.stuNo}}{{item.name}}{{item.cTime | dateFormat}}刪除// 自定義自動(dòng)獲取焦點(diǎn)的全局指令
Vue.directive('focus',{
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
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}`
}
}
})
標(biāo)簽：stuNo,vue,name,item,信息管理,案例,nbsp,dateStr,var
來源： https://www.cnblogs.com/zhahuhu/p/11618599.html
總結(jié)
以上是生活随笔為你收集整理的html写学生信息管理,vue实现简单学生信息管理案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle 查看服务器密码修改,如何修
- 下一篇： LeetCode 200. 岛屿数量（图