列表渲染

列表渲染适合于一些复用性比较高的元素
关键词：v-for指令

有序列表ol和无序列表ul是天然可以适用这种情况的元素。
如下例子

        

            {{ item.message }}
        
    

    

运行结果如图：

重复化渲染

我们可以看到，应用v-for，使用一个类似于循环的操作，遍历items中所有的对象，取出message值，这种复用可以减少html复杂而又几乎同质化的元素操作。

当然，v-for指令还提供了index这个隐藏参数。
我们可以使用index来确定元素在“数组”中的序列。

    
    

        

            {{ parentMessage }} - {{ index }} - {{ item.message }}
        
    

    

如图所示~

当然，v-for也可以用来遍历对象中的属性。

    

        

            {{ value }}
        
    

    

内部类似于原生js中的for-in循环

与此同时，键名作为一个可选参数，也可以出现在参数列表里。

    

        

            No{{ index }}: "{{ name }}" : "{{ value }}"
        
    

    

结果显而易见

简单拼接

在开始下面的介绍之前，先介绍一下JavaScript数组中的两类方法

• 变异方法

pop()
shift()
unshift()
splice()
sort()
reverse()

• 非变异方法

filter()
slice()
...

显而易见，所有的变异方法都是对原数组进行修改的方法，而非变异方法反之，会得到一个新数组。
在Vue中，变异方法的调用，也会触发视图的更新操作。
这为我们提供了一个新思路，如果说，你的项目中不想对原数组进行修改，可以使用计算属性，每次获取一个原数组的拷贝。

    
    

        
{{ n }}
    

    

结果就像这样

计算属性

当然对于计算属性来说，多重循环是不适用的，这里我们可以用Vue中提供的方法。

    
    

        

          
{{ n }}
        
    

    

这样就会有两个ul被渲染出来，对应两个子数组。

计算属性不适用的情况

既然v-for号称循环指令，最基本的计数循环也可以做。

    

      {{ n }} 
    

    

打印一组数字

也可以结合template，渲染一组元素。

效果图如下，中间的空行用来格式控制，但是它们是实际存在的元素。

格式控制

有人会问了，那v-if和v-for有什么关系吗？

在官方的文档中，不建议同时使用。
如果使用了，优先级如下。

    
    

        

            {{ todo.title }} : {{ todo.content }}
        
    

    

v-for和v-if

可以看到，在每一次循环进行之后，才会进行v-if的判断，要不要渲染这个元素。即v-for的优先级大于v-if

如果你想做到按条件决定是否循环，请将v-if中的元素包裹在需要判断是否循环的元素外面。

    

      

        {{ todo }}
      
    
    
No todos left!

最后，又到了Vue关于原理的一部分，我也不太理解，贴点伪码。