Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）

完整案列demo：

    
    



    
    

        

            
{{item.message}} -- {{index+1}}
        
    

    
    
    

        

            

                {{index+1}}:{{key}}:{{value}}
            
        
    

    

        
        

            
{{n}}
        

        
        

            
{{n}}
        
    

    

        添加一个Todo：
        
        
       
        
        
        
        

            
            
        
    

一、遍历数组

（1）DOM

（2）数据模板

v-for指令相当于C#中的foreach，Java中的加强for，格式：item in items，items为数组或者集合，item为遍历数组或集合时取出的单个对象，当然，vue也支持取出对象所在的位置index，也就是（item，index） in items，注意参数的顺序不要搞错了！

（3）显示

二、遍历对象（map），以键值对k：v的形式渲染DOM

（1）DOM

（2）数据模板

和遍历数组一样，遍历map对象时，注意参数顺序，也可以单独只取出value，比如 v-for="value in person"

(3)显示

三、结合computed+filter函数，遍历过滤后的偶数/奇数数组

（1）DOM

（2）数据模板

（3）显示

四、v-for指令与组件注册相结合实现todos的添加和删除

（1）DOM

（2）todo-item组件注册

注意自定义事件的名称：removetodo 要小写，不要写成removeTodo，遵循W3C标准

（3）数据模板

给v-for中的每一个元素，实际上是一个li元素，赋予一个唯一的key值（id）

2.2.0+ 以上版本中，当对组件使用 v-for 时，必须设置 key 属性

（3）显示