Vue学习小案例

品牌列表案例

一. 案例效果

二. 整体实现步骤

创建基本的 vue 实例
基于 vue 渲染表格数据
实现添加品牌的功能
实现删除品牌的功能
实现修改品牌状态的功能

总结一下我在这个小案例中遇到的一些小问题

第一个：

input的id与label的for冲突问题，导致页面中状态点击任何一个都启用第一个
解决方法：
使用每一个list的id定义input的id跟label的for，解决冲突

第二个：
添加新的品牌
解决办法：
定义brand为内容输入的内容
定义nextid为id

定义一个点击事件，在点击事件内声明一个object对象，里面添加用户输入的内容。最后将object插入到list内

代码





    
    
    
    品牌列表案例
    
    




    
添加品牌
品牌名称

            
                
                    #
                    品牌名称
                    状态
                    创建时间
                    操作
                
            
            
                
                    {{ item.id }}
                    {{ item.name }}
                    
已启用已禁用
                    {{ item.time }}
                    删除