使用Bootstrap和Vue实现用户信息的编辑删除功能

使用Bootstrap实现简单的布局，并结合Vue进行用户信息的编辑删除等功能，代码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>用户信息编辑</title>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="external nofollow" >
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="bootstrap.js"></script>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
 <div class="container">
  <form role="form">
   <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" name="username" class="form-control" placeholder="请输入用户名" v-model="username">
   </div>
   <div class="form-group">
    <label for="password">密码</label>
    <input type="password" name="password" class="form-control" placeholder="请输入密码" v-model="password">
   </div>
   <div class="form-group">
    <button type="button" class="btn btn-primary" @click="add()">添加</button>
    <button type="reset" class="btn btn-danger">重置</button>
   </div>
  </form>
  <hr>
  <table class="table table-bordered table-hover">
   <caption class="h3 text-info">用户信息</caption>
   <tr>
    <th class="text-center">序号</th>
    <th class="text-center">用户名</th>
    <th class="text-center">密码</th>
    <th class="text-center">操作</th>
   </tr>
   <tr class="text-center" v-for="item in myData">
    <td>{{$index+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.password}}</td>
    <td>
     <button class="btn btn-danger" data-toggle="modal" data-target="#myModal" @click="nowIndex=$index">删除</button>
    </td>
   </tr>
   <tr v-show="myData.length!=0">
    <td colspan="4" class="text-center">
     <button class="btn btn-danger" data-toggle="modal" data-target="#myModal" @click="nowIndex=-2">删除全部</button>
    </td>
   </tr>
   <tr v-show="myData.length==0">
    <td colspan="4" class="text-center">
     <h5 class="text-muted">暂无信息...</h5>
    </td>
   </tr>
  </table>
  <!-- 模态框 -->
  <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
      <h4 class="modal-title text-danger">警告！</h4>
     </div>
     <div class="modal-body">
      <h4 class="text-center">确认删除？</h4>
     </div>
     <div class="modal-footer">
      <button type="button" data-dismiss="modal" class="btn btn-primary">取消</button>
      <button type="button" data-dismiss="modal" class="btn btn-danger" @click="deleteMsg(nowIndex)">确认</button>
     </div>
    </div>
   </div>
  </div>
 </div>
<script type="text/javascript">
 new Vue({
  el: ".container",
  data: {
   myData:[],
   username:"",
   password:"",
   nowIndex:-100
  },
  methods:{
   add:function(){
    this.myData.push({
     name:this.username,
     password:this.password
    });
    this.username="";
    this.password="";
   },
   deleteMsg:function(n){
    if(n==-2){
     this.myData=[];
    }else{
     this.myData.splice(n,1);
    }
   }
  }
 });
</script>
</body>
</html>

实现效果如下,因为只是简单的实现编辑删除的功能，因此密码就直接显示在表格中，没有进行加密显示

整体布局界面

用户信息编辑后添加

删除数据

总结

以上所述是小编给大家介绍的使用Bootstrap和Vue实现用户信息的编辑删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • 使用Bootstrap和Vue实现用户信息的编辑删除功能

    使用Bootstrap和Vue实现用户信息的编辑删除功能

    使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs

  • vue 实现用户登录方式的切换功能

    一.vue 实现用户登录方式的切换 在 data 当中,定义一个标识符 loginWay,用来表示是用短信登录还是密码登录,true代表短信登录,false 代表密码登录,代码如下所示: data() { return { loginWay: true } } 在短信登录和密码登录上,进行动态样式绑定,loginWay为true就短信登录绑定动态样式on,loginWay为false就密码登录绑定动态样式on,并且也绑定点击事件,进行设置 loginWay的true和false,代码如下所示:

  • jquery实现员工信息添加与删除功能

    jquery实现员工信息添加与删除功能

    本文实例为大家分享了jquery实现员工信息添加与删除功能的具体代码,供大家参考,具体内容如下 员工表格添加用了jquery事件 主要按钮绑定事件 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript&quo

  • springboot vue接口测试前后端树节点编辑删除功能

    springboot vue接口测试前后端树节点编辑删除功能

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下 复制代码 代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin

  • vue与bootstrap实现简单用户信息添加删除功能

    vue与bootstrap实现简单用户信息添加删除功能

    本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码,供大家参考,具体内容如下 小记: 1.v-model=""    用于input表单双向数据绑定  逻辑层跟渲染层双向绑定 2.v-on:click='add()'     click方法绑定 3.v-for='(item,index) in myData'   遍历数组  {{index}}      {{item.name}}      {{item.age}}   适用于vue版本2.0 4.v-f

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • vue实现微信获取用户信息的方法

    本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息 微信网页授权 1.微信公众号网页授权配置,详见官网 2.关于网页授权的两种scope的区别说明 (详细见官网) -scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面,不需要用户操作 -scope=snsapi_userinfo 获取微信用户详细信息(

  • Vue github用户搜索案例分享

    Vue github用户搜索案例分享

    目录 完成样式 1.public 下新建 css 文件夹 2.新建 Search.vue 3.新建 List.vue 4.App.vue 中引入并注册组件 请求数据 1.Search 中请求数据 2.传递数据 完善 使用 vue-resource 完成样式 1.public 下新建 css 文件夹 public 下新建 css 文件夹,放入下载好的 bootstrap.css,并在 index.html 中引入 2.新建 Search.vue <template>   <section

  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e

随机推荐