<!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. 2019-2020-1 20199314 <Linux内核原理与分析>第一周作业

    前言 本周对实验楼的Linux基础入门进行了学习,目前学习到实验九完成到挑战二. 学习和实验内容 快速学习了Linux系统的发展历程及其简介,学习了下的变量.用户权限管理.文件打包及压缩.常用命令的和 ...

  2. PHP5.6版本在Windows上安装redis扩展

    PHP使用redis扩展 一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择 ...

  3. 【linux】【PostgreSQL】PostgreSQL安装

    前言 PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4.2版本为基础的对象关系型数据库管理系统.POSTGR ...

  4. 虚拟机VMware14 pro下安装REHL5U11

    1. 创建虚拟磁盘,自定义,磁盘类型选IDE,确保安装系统过程中只有一个物理光盘驱动/ISO镜像: 2. 安装VMware Tools 2.1 虚拟机>安装VMware Tools 2.2 在光 ...

  5. 23种设计模式之原型模式（Prototype Pattern）

    原型模式 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对象 ...

  6. 23种设计模式之抽象工厂（Abstract Factory Pattern）

    抽象工厂 当想创建一组密不可分的对象时,工厂方法似乎就不够用了 抽象工厂是应对产品族概念的.应对产品族概念而生,增加新的产品线很容易,但是无法增加新的产品.比如,每个汽车公司可能要同时生产轿车.货车. ...

  7. SpringBoot数据聚合（spring-boot-data-aggregator-starter）

    背景 接口开发是后端开发中最常见的场景, 可能是RESTFul接口, 也可能是RPC接口. 接口开发往往是从各处捞出数据, 然后组装成结果, 特别是那些偏业务的接口. 例如, 我现在需要实现一个接口, ...

  8. 前端获取后台传输过来是数据 {张三:12} 解析为[object object]，获取其中内容

    昨天遇到前端传输过来的数据为[{张三:12},{李四:23}],后台用的是map格式,我在前端js中暂未找到直接调用对象内容的方法,故利用以下方法来获取: $.each(data.data,funct ...

  9. 03-body标签中的部分标签

    一.字体标签 标题标签h1-h6 h1定义最大的标题,h6定义最小的标题,一般一个页面中h1只能出现一次,尽量标题不要超过三级.h标签具有align属性,属性值分别是:left.center.righ ...

  10. c++ 对特定进程的内存监控

    在工具实现的过程中,遇到了内存爆了的问题,部分模型的规模可以达到10的100次方方甚至1000次方.(工具的主要算法涉及到了递归,递归深度会很深,所以也用到了ulimit修改栈空间来缓解爆栈的问题,治 ...