Vue中搭配Bootstrap实现Vue的列表增删功能

在日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间。

当我们想要生成表单表格时我们可以查看Bootstrap的官方文档，来选择我们想要的样式，并根据自己的一些实际情况或者个人喜好进行一定的修改。了解Bootstrap

为了直接搭配Vue使用，我们把表单代码直接复制到 root 容器里面。

    
    

        
添加水果
        

            
            

                

                    

                        

                            

                                
水果名称
                            
                            
                        
                    
                    

                        添加
                    
                
            
        
    

这边借助一下Bootstrap中的card(卡片)进行布局，扩充一下宽度。 

接下来我们在借助Bootstrap生成一个表格部分：

    

        

            
ID
            
水果名称
            
状态
            
添加时间
            
操作
        
    
    

        

            
1
            
苹果
            

                

                    
                    已禁用
                
            
            
时间
            

                删除
            
        
    

表格结构写完之后，接下里我们就要使用Vue对表格进行填充数据了。

接下里给删除操作绑定点击事件，如下：

给a链接绑定一个删除的点击事件。

我们使用filter进行过滤掉删除的数组，当前循环项的item.id不等于我们要删的id，就返回。

接下来我们实现水果的添加功能。

给输入框设置双向绑定事件，给表单设置提交事件并添加阻止事件。

定义用户输入的水果名称以及下一个可用的ID ：

给绑定的add事件添加判断行为：

现在基本的添加删除功能已经完成，请看效果：

完整代码：

 

    
    
    
    
    
    

 

    

        
        

            
添加水果
            

                
                

                    

                        

                            

                                

                                    
水果名称
                                
                                
                            
                        
                        

                            添加
                        
                    
                
            
        
 
        
        

            

                

                    
ID
                    
水果名称
                    
状态
                    
添加时间
                    
操作
                
            
            

                

                    
{{item.id}}
                    
{{item.name}}
                    

                        

                            
                            已启用
                            已禁用
                        
                    
                    
{{item.time}}
                    

                        删除
                    
                
            
        
    
 
 
    
    

 

到此这篇关于Vue中搭配Bootstrap实现Vue的列表增删功能的文章就介绍到这了,更多相关vue bootstrap列表增删内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！