<!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. 【Jenkins持续集成(二)】Windows上安装Jenkins教程

    一.前言 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立的 Java ...

  2. Elasticsearch(9) --- 聚合查询(Bucket聚合)

    Elasticsearch(9) --- 聚合查询(Bucket聚合) 上一篇讲了Elasticsearch聚合查询中的Metric聚合:Elasticsearch(8) --- 聚合查询(Metri ...

  3. spring aop介绍和示例

    参考:<Spring in Action> 一.AOP介绍 AOP是Aspect Oriented Programming的缩写,意思是面向切面编程. 应用中有一些功能使用非常普遍,比如事 ...

  4. [Advanced Python] 11 - Implement a Class

    基础概念:[Python] 08 - Classes --> Objects 进阶概念:[Advanced Python] 11 - Implement a Class 参考资源:廖雪峰,面向对 ...

  5. 跟我学SpringCloud | 第二十章：Spring Cloud 之 okhttp

    1. 什么是 okhttp ? okhttp 是由 square 公司开源的一个 http 客户端.在 Java 平台上,Java 标准库提供了 HttpURLConnection 类来支持 HTTP ...

  6. windows环境下搭建python虚拟环境及离线移植

    以python3.6为例 ①安装virtualenv: #pip安装之后在D:\Python36\Scripts目录下可以看到多了一个virtualenv.exe可执行文件pip install vi ...

  7. 我用阿里云的虚拟云主机，也能配置https加密吗？

    我用阿里云的虚拟云主机,也能配置https加密吗?答案是YES. 整个过程比想象中还要简单,都是一些基本的配置,虚拟主机 Web托管都可以很容易的搞定https. 首先我们要了解一下,阿里云是怎么支持 ...

  8. 关于json字符串与实体之间的严格验证

    在一个项目中要求严格验证传入的json字符串与定义的 类匹配,否则不记录.感觉这个严格验证找了好多资料才找到,可能用的人比较少,特摘出来给大家分析,直接上代码了:   using Newtonsoft ...

  9. mybatis简单入门介绍

    mybatis入门 简介 什么是mybatis? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及 ...

  10. Eureka参数配置->Server端参数

    1.基本参数 参数 默认值 说明 eureka.server.enable-self-preservation true 是否开启自我保护模式 eureka.server.renewal-percen ...