<!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. charles 访问控制设置

    本文参考:charles 访问控制设置 charles 访问控制设置 access control settings 访问账户设置: 这里可以配置连接到charles时的一些配置: 这个访问控制确定谁 ...

  2. [DE] Pipeline for Data Engineering

    How to build an ML pipeline for Data Science 垃圾信息分类 Ref:Develop a NLP Model in Python & Deploy I ...

  3. C++基础之string类

    string也是属于顺序容器,但是string类很重要且经常使用,因此在这里单独记录. string的操作总结 string(const char *s,int n);  //用c字符串s初始化,s应 ...

  4. 删除linux自带jdk

    提示:error: can't create transaction lock on /var/lib/rpm/.rpm.lock (Permission denied):代表权限不够 执行:su r ...

  5. Java 基础篇之编程基础

    基本数据类型 java 是强类型语言,在 java 中存储的数据都是有类型的,而且必须在编译时就确定其类型. 基本数据类型变量存储的是数据本身,而引用类型变量存的是数据的空间地址. 基本类型转换 自动 ...

  6. 如何看破真假美猴王 ？ --java中的Shadowing和Obscuring

    故事背景 <西游记>第五十七回:唐僧因悟空又打死拦路强盗,再次把他撵走.六耳猕猴精趁机变作悟空模样,抢走行李关文,又把小妖变作唐僧.八戒.沙僧模样,欲上西天骗取真经.真假二悟空从天上杀到地 ...

  7. 读取unicode日志文件并清除记录的垃圾文件

    //读取unicode文件,并清除记录的垃圾文件 //参数1:日志文件路径 bool ReadFilePath(const wchar_t *DataFilePath) { wchar_t ChBuf ...

  8. 深入Dapper.NET源码 (文长)

    目录 前言.目录.安装环境 Dynamic Query 原理 Part1 Dynamic Query 原理 Part2 Strongly Typed Mapping 原理 Part1 : ADO.NE ...

  9. Navicat使用常见的两个问题及解决方法，提高开发效率

    Navicat使用常见问题 在我们日常开发过程中,一般不会直接使用命令行来操作 MYSQL 数据库,而会选择一些图形化界面去帮助我们来进行此类操作,常用的有:SQLyog(Logo也是小海豚),Nav ...

  10. Python 必备面试基础知识-3

    今天继续分享 Python 相关的面试题,你准备好了嘛! 网络编程篇 1. 简述 OSI 七层协议 是网络传输协议,人为的把网络传输的不同阶段划分成不同的层次. 七层划分为:应用层.表示层.会话层.传 ...