vue实现信息管理系统


Posted in Javascript onMay 30, 2020

最近学习了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="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实现信息管理系统

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
javascript字符串函数汇总
Dec 06 Javascript
js倒计时简单实现代码
Aug 11 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 #Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
JS实现前端路由功能示例【原生路由】
May 29 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
flask应用部署到服务器的方法
2019/07/12 Python
python实现大文本文件分割
2019/07/22 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python matplotlib库的基本使用
2020/09/23 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
简历的自我评价范文
2014/02/04 职场文书
数控专业自荐书范文
2014/03/16 职场文书
金融与证券专业求职信
2014/06/22 职场文书
电影开国大典观后感
2015/06/04 职场文书