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

小编给大家分享一下怎么使用Bootstrap和Vue实现用户信息的编辑删除功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都做网站、网站建设服务,我们努力开拓更好的视野,通过不懈的努力,创新互联建站赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

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




 
 用户信息编辑
 
 
 
 


 
  
   
    用户名
    
   
        密码         
        添加     重置    
     
      用户信息         序号     用户名     密码     操作             {{$index+1}}     {{item.name}}     {{item.password}}           删除                        删除全部                        暂无信息...                                        ×       警告!      
            确认删除?                   取消       确认                      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);     }    }   }  });

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

整体布局界面


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

用户信息编辑后添加

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

删除数据

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

看完了这篇文章,相信你对“怎么使用Bootstrap和Vue实现用户信息的编辑删除功能”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


标题名称:怎么使用Bootstrap和Vue实现用户信息的编辑删除功能
浏览路径:http://myzitong.com/article/jijeis.html