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

vue实现简单学生信息管理案例,第1张

概述<!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>
<!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>&nbsp;&nbsp;        <div class="form-group">            <label>姓名:</label>            <input type="email" class="form-control" v-model="name" @keyup.enter="add">        </div>&nbsp;        <input type="button" class="btn btn-primary" value="添加" @click="add">        &nbsp;&nbsp;&nbsp;&nbsp;        <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实现简单学生信息管理案例全部内容,希望文章能够帮你解决vue实现简单学生信息管理案例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1031495.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存