<!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实现简单学生信息管理案例的更多相关文章

  1. Vue router简单配置入门案例

    { 注意驼峰命名法,不然会报错 } 1.在Views文件夹下创建Vue路由文件,例如: <template> </template>  <script> </ ...

  2. PHP0011：学生信息管理案例

    PHP中 html js 混合用

  3. 098 01 Android 零基础入门 02 Java面向对象 03 综合案例（学生信息管理） 02 案例分析及实现 02 编写并测试Subject类

    098 01 Android 零基础入门 02 Java面向对象 03 综合案例(学生信息管理) 02 案例分析及实现 02 编写并测试Subject类 本文知识点:编写并测试Subject类 说明: ...

  4. 099 01 Android 零基础入门 02 Java面向对象 03 综合案例（学生信息管理） 02 案例分析及实现 03 编写并测试Student类

    099 01 Android 零基础入门 02 Java面向对象 03 综合案例(学生信息管理) 02 案例分析及实现 03 编写并测试Student类 本文知识点:编写并测试Subject类 说明: ...

  5. 101 01 Android 零基础入门 02 Java面向对象 03 综合案例（学生信息管理） 02 案例分析及实现 05 通过方法实现学生类与专业类关联——方案二

    101 01 Android 零基础入门 02 Java面向对象 03 综合案例(学生信息管理) 02 案例分析及实现 05 通过方法实现学生类与专业类关联--方案二 本文知识点:通过方法实现学生类与 ...

  6. Laravel之简单的学生信息管理平台

    laravel框架写的简易版的学生信息管理平台,贯穿了laravel的控制器.视图.模板.模型.中间件.路由规则的使用. 页面是使用BootStrap前端框架搭建 使用laravel实现了增删改查的功 ...

  7. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  8. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  9. 【学员管理系统】0x02 学生信息管理功能

    [学员管理系统]0x02 学生信息管理功能 写在前面 项目详细需求参见:Django项目之[学员管理系统] Django框架大致处理流程 捋一下Django框架相关的内容: 浏览器输入URL到页面展示 ...

随机推荐

  1. 第一次接触WebSocket遇到的坑以及感受

    要求用.net写一个服务,然后通过webscoket实现客户端与服务端之间的通信. 第一次知道.net还可以用来写服务,然后问题来了,服务是什么- -..下面图里的就是服务,可以停止暂停和启动. 我要 ...

  2. [VB.NET Tips]字符串分隔

    在实际应用中,很多场景下都需要分隔字符串,如解析CSV文件等. 一般我们使用split方法来按照指定的分隔符来进行分隔字符串获得一个数组. Split方法的签名是: Split(ParamArray ...

  3. elasticsearch的分布式基础概念(1)

    Elasticsearch对复杂分布式机制的透明隐藏特性 Elasticsearch是一套分布式的系统,分布式是为了应对大数据量 隐藏了复杂的分布式机制 分片机制(随随便便就将一些document插入 ...

  4. 暑期——第五周总结（Web连接hbase数据库）

    所花时间:7天 代码行:1000(python)+250(java) 博客量:1篇 了解到知识点 : 在尝试使用hbase当作数据库时,林子雨老师教程中有完整代码关于使用hbase,我就像当然认为只需 ...

  5. ubuntu linux 修改ip 超扎心。

    老大说“终于搞定了,快记下来,不然以后又忘了”(露出慈母般的微笑) 参考地址:https://jingyan.baidu.com/article/adc815139ddcc4f723bf7339.ht ...

  6. SpringBootSecurity学习（09）网页版登录配置Session共享

    场景 当后台项目由部署在一台改为部署在多台以后,解决session共享问题最常用的办法就是把session存储在redis等缓存中.关于session和cookie概念这里就不再赘述了,在spring ...

  7. Spring MVC-从零开始-view-forward、redirect

    1.forward或redirect后,不再走viewResolver过程,直接重新从控制器开始 2.代码 package com.jt; import org.springframework.ste ...

  8. Knative 暂时不会捐给任何基金会 | 云原生生态周报 Vol. 22

    作者 | 新胜.心贵.进超.元毅.衷源 业界要闻 谷歌:不会向任何基金会捐赠 Knative 自 Knative 项目开始以来,一直存在关于是否将 Knative 捐赠给基金会(例如 CNCF)的疑问 ...

  9. Asp.NetCore源码学习[2-1]：日志

    Asp.NetCore源码学习[2-1]:日志 在一个系统中,日志是不可或缺的部分.对于.net而言有许多成熟的日志框架,包括Log4Net.NLog.Serilog 等等.你可以在系统中直接使用这些 ...

  10. 利用C++实现模块隐藏(R3层断链）

    一.模块隐藏的实现原理 普通API查找模块实现思路:其通过查询在R3中的PEB(Process Environment Block 进程环境块)与TEB(Thread Environment Bloc ...