vue 实现简单版本 todolist

昨天下午在记事本的功能上做了优化，做成了简单的 todolist，主要是来巩固一下vue的各种指令
以下是效果图

以上是简单版本的效果图，好啦，献上我的代码~欢迎大家踊跃提出建议

    
        
        
        
        
        
    
    
        
        

            
            

                
todolist
                
            
            
            

                

                    
待办事项
                    {{ arr.length }}
                
                
                

                    

                        {{ item.name }}
                        
                    
                
                

                    
已完成
                    {{ complate.length }}
                
                

                    

                        {{item.name}}
                        
                    
                
            
            
            

                clear
            
        
    
    
    

一开始有个小bug , 如果勾选了待办中的第三条数据，数据从待办删除了，但是最后一条的勾选框还在。因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上id作为唯一key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。但是我这里没有id，所以我暂时用的name做为唯一的key
大家实际开发中尽量用id 做为 唯一的 key

解决方式： 通过给两个 v-for 添加一个 :key=item.name ,

此处附上我的git地址，可以下载源码哦~

https://gitee.com/celinaTong/...