<!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. nfs 存储服务

    今日内容: NFS 1.什么是nfs? network file system 网络文件系统 nfs共享存储 2.nfs能干什么? nfs 能为 不同主机系统之间 实现 文件的共享 3.为什么要使用n ...

  2. Centos7 设置redis开机自启

    Centos7 设置redis开机自启 标签(空格分隔):Linux 环境 Centos7.1 redis-3.0.6 chkconfig方式 **service和chkconfig命令的功能好像都被 ...

  3. 容器时代的持续交付工具---Drone：Drone介绍与安装

    Drone:Drone is a Container-Native, Continuous Delivery Platform. 官方给的定义,从上面的定义可以得出两个关键点: 1,Container ...

  4. Mach-O在内存中符号表地址、字符串表地址的计算

    KSCrash 是一个用于 iOS 平台的崩溃捕捉框架,最近读了其部分源码,在 KSDynamicLinker 文件中有一个函数,代码如下: /** Get the segment base addr ...

  5. Tomcat下java普通类IO文件路径问题

    由于在windows和linux下文件路径的表示方式存在差异 而我们的项目大多是在windows下的eclipse中完成测试 然后部署到linux的tomcat服务器中 这个时候我们既不能把地址写死( ...

  6. Debezium SQL Server Source Connector+Kafka+Spark+MySQL 实时数据处理

    写在前面 前段时间在实时获取SQLServer数据库变化时候,整个过程可谓是坎坷.然后就想在这里记录一下. 本文的技术栈: Debezium SQL Server Source Connector+K ...

  7. 重学JavaScript之面向对象的程序设计（继承）

    1. 继承 ES 中只支持实现继承,而且其实现继承主要依靠原型链来实现的. 2. 原型链 ES中 描述了 原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引 ...

  8. 为何stop()和suspend()方法不推荐使用（转）

    stop()方法作为一种粗暴的线程终止行为,在线程终止之前没有对其做任何的清除操作,因此具有固有的不安全性. 用Thread.stop()方法来终止线程将会释放该线程对象已经锁定的所有监视器.如果以前 ...

  9. java8 运算语法集

    1.分组并进行求和组合运算 示例主要代码: List<String> items = Arrays.asList("apple", "apple", ...

  10. MongoDB4.0支持事务管理

    ​ 背景 最后我们看一下MongoDB的事务管理,本来是没这一篇的,因为网上大部分资料太老,都为MongoDB之前的版本,的确在MongoDB 4.0版本之前是没有事务管理,但是今天年初MongoDB ...