Vue学习笔记九：列表案例

前言

Vue也学了好几章了，这次我们要自己来做一个demo，一个列表，能增删改查的东西，首先，我们得使用Bootstrap，这样好看，我到现在才终于明白了，所谓的好看就是Bootstrap的css，Bootstrap的表格，表单啥的都漂亮，美。而这些好看的表格，表单的交互，我们需要的是框架Vue。

讲真，Bootstrap的美观和Vue的不操作DOM搭配起来是真的爽啊，先看看效果图吧

Bootstrap插件下载

先下载一个Bootstrap的Snippets插件，这个可以帮我们快速的写Bootstrap，有3和4，我用的3版本

Bootstrap表格和面板

看着上面的效果图，我们要新建Bootstrap的面板和表格，这些东西，你在Bootstrap官网就可以找到全部的内容

安装了上面的Bootstrap3 Snippets插件之后

输入bs3-panel:primary 即可快速创建面板

输入bs3-table:bordered 即可快速创建表格，表格样式很多，可以去官网看看哪些喜欢就加上。

面板里面还要写一些input标签

增加数据，v-model和v-on

其实这个我们之前做过了，不就是两个input框，都使用了v-model指令，然后添加按钮使用了v-on指令绑定一个方法，方法内容也写过，就是简单的this.list.push

删除数据，事件修饰符和找索引的两种方法

删除数据，就是一个删除按钮，这里我使用了a标签，然后使用了.prevent事件修饰符让a标签的链接不起效，然后还有我为了美化删除按钮，用了Bootstrap的按钮css

删除数据的时候有一个需要注意的地方，就是你删除的是安装索引算的数据，item.id仅仅只是id，所以我们要根据id找索引，有两种方法

一个是some方法，some方法也是遍历，但是遇到true的时候可以停止，list列表的删除方法是splice

     this.list.some((item,i)=>{
                    if(item.id==id){
                        this.list.splice(i,1) //删除一个
                        return true
                    }
                })

一个是js出的新方法，findIndex这个专门就是找索引的

       var index=this.list.findIndex(item=>{
                    if(item.id==id)
                    return true
                })
                this.list.splice(index,1)

查询数据，foreach和filter

查询数据这个，方法也有两个遍历和过滤

遍历到数据就添加进新的数组，返回

        var newlist=[]
                 this.list.forEach(item => {
                     if(item.name.indexOf(keywords)!=-1)
                     newlist.push(item)
                 });
                 return newlist

过滤

    return this.list.filter(item=>{
                    if(item.name.includes(keywords))
                    return item
                })

全部的HTML

由于上面的都是分步骤加的HTML，所以我干脆上面讲核心思想，代码全部在这里贴出，这个可以直接复制粘贴使用了。注意看注释，注释都是需要看看的

    
    
    
    
    
    



    
    
    


        
        
        
        

              

                    
蜀云泉的小列表
              
              
              

                  
                      id:
                  
                  
                      name:
                  

                  

                  
                        查询:
                    

              
        
        
        
        
        

            

                

                    
id
                    
name
                    
creattime
                    
operation
                
            
            

                

                    

                    

                    

                    
删除

                
            
        
        
        
        

    


    

防盗链接：本博客由蜀云泉发表

转载于:https://www.cnblogs.com/yunquan/p/10798002.html