Bootstrap與Vue操作使用者資訊的新增與刪除

這次帶給大家Bootstrap與Vue操作使用者資訊的新增與刪除，Bootstrap與Vue操作使用者資訊新增與刪除的注意事項有哪些，下面就是實戰案例，一起來看一下。

nbsp;html>


 <meta>
 <title>用户信息编辑</title>
 <link>
 <script></script>
 <script></script>
 <script></script>


 <p>
  </p>

   

    用户名         

   

    密码         

   

    添加     重置    

  

  

---

                                                                                           

用户信息

序号	用户名	密码	操作
{{$index+1}}	{{item.name}}	{{item.password}}	删除
删除全部
暂无信息...

     

   

    

     

      ×       

警告！

           

      

确认删除？

           

      取消       确认      

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

實現效果如下,因為只是簡單的實作編輯刪除的功能，因此密碼就直接顯示在表格中，沒有進行加密顯示

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Angular操作表單增刪改查的驗證功能

來源生JS怎麼實作檔案異步上傳

以上是Bootstrap與Vue操作使用者資訊的新增與刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章！