vue实现简单学生信息管理
本文实例为大家分享了vue实现学生信息管理的具体代码，供大家参考，具体内容如下
代码：
<!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>
<div class="form-group">
<label>姓名：</label>
<input type="email" class="form-control" v-model="name" @keyup.enter="add">
</div>
<input type="button" class="btn btn-primary" value="添加" @click="add">
<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实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> <script src="https://cdn.jsdelivr
-
vue实现简单学生信息管理
本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理</title> <link rel="stylesheet" href="./lib/bootstrap.css&quo
-
Laravel框架实现简单的学生信息管理平台案例【附源码下载】
本文实例讲述了Laravel框架实现简单的学生信息管理平台.分享给大家供大家参考,具体如下: laravel框架写的简易版的学生信息管理平台,贯穿了laravel的控制器.视图.模板.模型.中间件.路由规则的使用. 页面是使用BootStrap前端框架搭建 使用laravel实现了增删改查的功能. 代码下载链接在文章底部. //这是路由文件的关键代码 Route::group(['middleware' => ['web']], function () { Route::get('student
-
基于VUE实现简单的学生信息管理系统
一.主要功能 本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为: 1.显示所有学生的信息(默认为10个) 2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息 3. 增加学生信息 4. 要求使用VUE中 父子组件间通信 二.实现思路 1.数据管理:使用json数组的方式来管理储存数据 2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件.主页(父组件)使用v-for循环显示子组件. 3.按单双号筛选查找学生:
-
C语言数组实现学生信息管理系统设计
概述 单纯只用多个数组管理学生成绩信息,不使用结构体,该程序最主要的难点是依据学号或总成绩对学生信息进行排序,借助了临时数组来标记排好序的下标. 运行结果如下: 输入数据: 打印数据: 根据学号对信息进行排序: 根据总成绩对信息进行排序: 根据学号删除某一信息: 代码如下: #include <stdio.h> #include <stdlib.h> //exit函数头文件 #include <string.h> //字符串相关操作头文件 #define MAX_STU
-
C语言学生信息管理系统设计与实现
本文实例为大家分享了C语言学生信息管理系统的具体代码,供大家参考,具体内容如下 #include"stdio.h" //标准的输入输出函数文件头部说明 #include"math.h" // 数学函数头部说明 #include"string.h" #include"stdlib.h" //通过该函数头部里的函数,改变控制台的背景和颜色 #include"windows.h" //头文件声明,下文用到了改变控
-
vue实现简单表格组件实例详解
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩
-
java学生信息管理系统设计
本例的学生信息添加进入数据库的事务(可以提交事务,事务回滚,用本地线程完善) 主页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <htm
-
java学生信息管理系统设计（2）
本例的学生信息添加进入数据库的事务(可以提交事务,事务回滚,用本地线程完善) 主页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <htm
-
C语言实现简单学生成绩管理系统
本文实例为大家分享了C语言实现学生成绩管理系统的具体代码,供大家参考,具体内容如下 C语言小项目 实现一个学生成绩管理系统 系统功能: 1.实现所有学生成绩的录入(利用结构体数组),当输入字符为end时候,结束成绩的录入: 2.实现所有学生信息的输出 3.输入指定学生姓名,并能输出这名学生的信息 4.将学生成绩按照语文和数学成绩排序 思路: 1. 首先,先把这个小项目的框架打好.考虑要写几个文件,每一个文件里面实现怎样的功能.考虑到这个小项目的代码量以及程序的易读性,我决定将写三个文件.一
-
vue中简单弹框dialog的实现方法
效果如下,dialog中内容自行添加 <template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class=