vue实现信息管理系统
最近学习了vue，自己用bootstrap+vue写了一个信息管理系统，只有前端，没有后台，可以实现基本的增、删、改、查
具体效果在结尾处有附图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,html{
margin: 20px 50px;
}
.title2{
color: blueviolet;
}
.table th,td{
text-align: center;
}
</style>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>信息管理系统</h1>
<div id="box">
<div class="form-group">
<label for="user">姓名</label>
<input type="text" class="form-control" id="user" placeholder="请输入姓名" v-model='user'>
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model='age'>
</div>
<div class="form-group">
<label for="">职位</label>
<select class="form-control" class="zhiwei" v-model='zhiwei'>
<option>ios工程师</option>
<option>h5工程师</option>
<option>java工程师</option>
<option>UI设计师</option>
</select>
</div>
<div class="form-group">
<label for="sex">性别</label>
<input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model='sex'> 男
<input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="女" v-model='sex'> 女
</div>
<button class="btn btn-success" @click='add()'>添加</button>
<button class="btn btn-danger" @click="chongzhi()">重置</button>
<h3 class="title2">用户信息表</h3>
<table class="table table-bordered">
<tr>
<th>序号</th>
<th>姓名</th>
<th>信息</th>
<th>操作</th>
<th>操作</th>
</tr>
<tr v-for="(item,i) in arr">
<td>{{i}}</td>
<td>{{item.user}}</td>
<td><button class="btn btn-success " type="button" data-toggle="modal" data-target="#myModal" @click='detail(i)'>查看</button></td>
<td><button class="btn btn-success" @click='del(i)'>删除</button></td>
<td><button class="btn btn-success" @click='update(i)'>修改</button></td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">详情</h4>
</div>
<div class="modal-body">
<ul>
<li>姓名：{{user}}</li>
<li>年龄：{{age}}</li>
<li>职位：{{zhiwei}}</li>
<li>性别：{{sex}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
user:'',
age:'',
zhiwei:'',
sex:'',
arr:[]
},
methods:{
add(){
this.arr.push({
user:this.user,
age:this.age,
sex:this.sex,
zhiwei:this.zhiwei
})
this.user = '';
this.age = '';
this.zhiwei = '';
this.sex='';
},
del(i){
this.arr.splice(i,1)
},
chongzhi(){
this.user = '';
this.age = '';
this.zhiwei = '';
this.sex = "";
},
detail(i){
this.user = this.arr[i].user
this.age = this.arr[i].age
this.zhiwei = this.arr[i].zhiwei
this.sex = this.arr[i].sex
},
update(i){
this.arr[i].user = prompt('请修改名字')
this.arr[i].age = prompt(' 请修改年龄')
this.arr[i].zhiwei = prompt('请修改职位')
this.arr[i].sex = prompt(' 请修改性别')
//console.log(prompt(' 修改名字'))
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现户籍管理系统
本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
-
vue实现信息管理系统
最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
-
基于VUE实现简单的学生信息管理系统
一.主要功能 本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为: 1.显示所有学生的信息(默认为10个) 2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息 3. 增加学生信息 4. 要求使用VUE中 父子组件间通信 二.实现思路 1.数据管理:使用json数组的方式来管理储存数据 2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件.主页(父组件)使用v-for循环显示子组件. 3.按单双号筛选查找学生:
-
vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> <script src="https://cdn.jsdelivr
-
vue实现图书管理系统
本文实例为大家分享了vue实现图书管理系统的具体代码,供大家参考,具体内容如下 组件代码 <template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id" v-focus> 编
-
基于springboot+vue实现垃圾分类管理系统
本文实例为大家分享了springboot+vue实现垃圾分类管理系统的具体代码,供大家参考,具体内容如下 一.项目概述 1.项目内容 本项目利用IDEA,Visual Studio Code 开发工具,借助Mysql,Navicat for MySQL 工具,实现了一个基于springboot+vue的垃圾分类管理系统.系统为两种类型的用户提供服务,用户和管理员. 2.实现功能 (1)登陆功能 通过和数据库建立联系后,数据库内的用户和管理员可在登录页面输入账号和密码登陆网页. (2)数据的增.查
-
springboot+vue制作后台管理系统项目
目录 一.所使用的环境配置: 二.项目简介 三.知识点总结(代码和配置) SpringBoot: 1.Mybatis-Plus配置文件,实现分页查询:MybatisPlusConfig 2.跨域配置文件:CorsConfig 3.请求返回类!:Result 4.pom.xml配置文件 Vue: 其余知识点总结: 总结: 学习资源来自于B站UP,up他讲的非常详细,对于熟悉两大框架很有用. 我的作业源代码在文章末尾,欢迎有需要的同学,学习参考使用,内置SQL文件,导入后,开启springboot和
-
基于Java SpringBoot的前后端分离信息管理系统的设计和实现
目录 前言 视频演示 主要功能说明 功能截图 主要代码实现 主要数据表设计 前言 当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题.为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法. Java作为一种面向对象的.可以撰写跨平台应用软件的程序设计语言,其技术具
-
Java实现学生信息管理系统(借助Array List)
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 需求: 制作一个简单的学生信息管理系统 1.通过键盘选择操作进行添加学生(学号,姓名,性别,年龄,成绩)的信息,这些信息通过数组存储. 2.同时还可以进行: (1)查询某个或全体学生信息: (2)修改学生信息: (3)删除学生信息的操作. 要求:有一定的优化,例如对用户输入信息是否符合要求的处理. 1.首先对学生的 学号,姓名,性别,年龄,成绩这五个信息进行定义,为了不让所有人都能访问到,所
-
JSP学生信息管理系统
本文实例为大家分享了JSP学生信息管理系统源码,JSP+Servlet+Javabean+JDBC+MySQL,供大家参考,具体内容如下 1.service层,进行数据库操作 package com.service; /** * 负责学生信息的所有数据库操作,增删改查 */ import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQ
-
C++实现简单的信息管理系统
本文为大家分享C++实现简单的信息管理系统,小编之前在学习的时候也要做一些管理系统,在网上查了许多资料,现在我把资料分享给大家,希望能够帮助到大家. #include <stdio.h> #include <stdlib.h> #include "file.h" void savaList(Node *head)/**把用户录入的数据存储到文件里面去方便下次读取*/ { FILE *fp=fopen("data\\data.txt" ,&qu