vue实现简单学生信息管理
程序员文章站
2022-06-25 12:53:06
本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下代码: &l...
本文实例为大家分享了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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 曹操杀吕伯奢