Hinzufügen und Löschen von Benutzerinformationen in Bootstrap- und Vue-Vorgängen-js-Tutorial-php.cn

Hinzufügen und Löschen von Benutzerinformationen in Bootstrap- und Vue-Vorgängen

php中世界最好的语言

Freigeben： 2018-04-16 17:35:13

Original

1842 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen So fügen Sie Benutzerinformationen hinzu und löschen sie beim Betrieb von Bootstrap und Vue. Was sind die Vorsichtsmaßnahmen zum Hinzufügen und Löschen von Benutzerinformationen beim Betrieb von Bootstrap? und Vue? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

<!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>

Nach dem Login kopieren

Der Implementierungseffekt ist wie folgt. Da es sich nur um eine einfache Funktion zum Bearbeiten und Löschen handelt, wird das Passwort direkt in der Tabelle ohne Verschlüsselung

angezeigt. Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Überprüfungsfunktion für das Hinzufügen, Löschen, Ändern und Überprüfen von Winkeloperationen

Wie Yuansheng JS implementiert asynchroner Datei-Upload

Das obige ist der detaillierte Inhalt vonHinzufügen und Löschen von Benutzerinformationen in Bootstrap- und Vue-Vorgängen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!