本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/187635/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)