可能会想到v-if 和 v-for的两种情况
1、为了过滤一个列表中的项目
2、为了避免渲染本应该被隐藏的列表
那么，接下来看下这两种情况
第一种情况：为了过滤一个列表中的项目
为了过滤项目内容，我们可能会如下调用：
这样写固然会得到你想要的效果，但是因为v-for 和 v-if 优先级的关系，所以会经过如下的运算
因此，哪怕只渲染出一小部分，也得在每次重新渲染的时候遍历整个列表，无论年龄是否满足我们的条件。
所以我们推荐使用计算属性，在计算属性中处理过滤事宜，计算属性会在完毕后缓存内容，提高遍历的效率。
第二种情况：为了避免渲染本应该被隐藏的列表
也就是根据条件类别判断列表的显示我们以后也可能会使用下面的方法调用
<li v-for=" fruite of fruites " v-if = " isShow " ></li>
显示（过滤/排序）结果
有时，我们想要显示一个数组的过滤或者排序副本，而不实际改变或重置原始数据，在这种情况下，可以使用计算属性和方法来过滤数据。
<li v-for=" n in even(numbers) " >{{ n }} </li>
data:{
numbers:[ 1,2,3,4,5,6 ]
}
methods:{
even(num){
//执行方法
}
}
这样我们得到的结果是一样的，但是有如下优点：
1、过滤后的列表只会在数组发生变化时才被重新运算，过滤更高效
2、使用 v-for = " item of obj " 之后，我们在渲染过滤后的数据，渲染更高效
3、解耦渲染层的逻辑，可维护性（对逻辑的更改和拓展）更强
双层v-for循环
<li v-for="(fruit,index) in fruites">
{{ index+1}}. {{fruit.name}}
<ul>
<li v-for="(fruit,index) in fruit.color">
{{ index + 1 }}.{{childrenIndex+1}}
</li>
</ul>
</li>
data:{
fruites:[
{ name:'香蕉',color:['green','yellow'] },
{ name:'苹果',color:['red','yellow','green'] },
{ name:'西瓜',color:['pink','orange'] },
}
其他不常用的循环
1、循环字符串
<div v-for="item in 'abcdef' >{{ item }}</div>
2、循环数字
<span v-for="num in 10">{{ num }}</span>
3、借用template来循环嵌套多个元素
<template v-for="item in items" >
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
