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 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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中截取中文字符串的代码小结
2011/07/17 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php输出图像的方法实例分析
2017/02/16 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python eval函数介绍及用法
2020/11/09 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
计算机实训报告范文
2014/11/05 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
欢送会主持词
2015/07/01 职场文书
四年级语文教学反思
2016/03/03 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS