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

2019-11-19 15:04:48

字体：大中小

来源：转载

供稿：网友

使用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>

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

整体布局界面

这是整体布局界面