Home > Article > Web Front-end > Adding and deleting user information in Bootstrap and Vue operations

Adding and deleting user information in Bootstrap and Vue operations

php中世界最好的语言Original: 2018-04-16 17:35:131771browse

This time I will bring you Bootstrap the addition and deletion of user information when operating with Vue. What are the precautions for adding and deleting user information when using Bootstrap and Vue? The following is a practical case, let’s take a look.

<!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>
 <p class="container">
  <form role="form">
   <p class="form-group">
    <label for="username">用户名</label>
    <input type="text" name="username" class="form-control" placeholder="请输入用户名" v-model="username">
   </p>
   <p class="form-group">
    <label for="password">密码</label>
    <input type="password" name="password" class="form-control" placeholder="请输入密码" v-model="password">
   </p>
   <p class="form-group">
    <button type="button" class="btn btn-primary" @click="add()">添加</button>
    <button type="reset" class="btn btn-danger">重置</button>
   </p>
  </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>
  <!-- 模态框 -->
  <p class="modal fade" id="myModal" role="dialog" tabindex="-1">
   <p class="modal-dialog">
    <p class="modal-content">
     <p class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
      <h4 class="modal-title text-danger">警告！</h4>
     </p>
     <p class="modal-body">
      <h4 class="text-center">确认删除？</h4>
     </p>
     <p 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>
     </p>
    </p>
   </p>
  </p>
 </p>
<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>

The implementation effect is as follows. Because it is only a simple function of editing and deleting, the password is directly displayed in the table without encryption.

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Adding and deleting user information in Bootstrap and Vue operations

Related articles