当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你想仅有的一些项渲染节点时，这种优先级的机制会十分有用：
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>
一个组件的v-for
在自定义组件里，你可以像任何普通元素一样用v-for:
<my-component v-for="item in items" :key="item.id"></my-component>
在2.2.0+版本里面。当组件中使用v-for时，key现在是必须的。
然而，任何数据都不会自动传递到组件中，因为组件有自己的独立作用域，为了把迭代数据传递到组件里，我们要用props：
<my-component v-for="(item, index) in items" :item="item" :index="index" ：key="item.id" ></my-component>
不自动将item注入到原组件里的原因是这会使得组件与v-for的运作耦合，明确组件数据的来源能够使组件在其他场合重复使用。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>07vue列表渲染</title> <script src="https://www.jb51.net/article/vue.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'.box', data:{ dataList:['a','b','c','d','e','f'], newObj:{ "name":"lucy", "age":18 }, objDataList:[ { "name":"genery", "age":18 }, { "name":"bulse", "age":20 }, { "name":"naev", "age":23 } ] } }) } </script> </head> <body> <div> <ul> <!-- v-for 列表数据 --> <li v-for="(item,index) in dataList">{{index}}---{{item}}</li> <li v-for="item in dataList">{{item}}</li> <!-- 对象 --> <li v-for="(value,key) in newObj">{{key}}-------{{value}}</li> <li v-for="value in newObj">{{value}}</li> <!-- 字典形式 --> <li v-for="datadict in objDataList">{{datadict}}</li> <li v-for="datadict in objDataList">{{datadict.name}}</li> <li v-for="datadict in objDataList">{{datadict.age}}</li> </ul> <div v-for="item in dataList">div: {{item}}</div> </div> </body> </html>
vue的列表渲染其实就是通过指令v-for可以将一组数据渲染到页面中,这一组数据可以是数组抑或是对象,v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。