本页目录
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 绑定数组
v-for 可以绑定数据到数组来渲染一个列表：
<script src="https://unpkg.com/vue@next"></script><div id="app"> <ol> <li v-for="site in sites"> {{ site.text }} </li> </ol></div><script>const app = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染结果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appq"> <ol> <li v-for="site in sites"> {{ site.text }} </li> </ol></div><script>const appQ = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(appQ).mount('#appq')</script>v-for 绑定数组的索引
v-for 还支持一个可选的第二个参数，参数值为当前项的索引：
index 为列表项的索引值（从 0 开始）
<script src="https://unpkg.com/vue@next"></script><div id="app"> <ol> <li v-for="(site, index) in sites"> {{ index }} -{{ site.text }} </li> </ol></div><script>const app = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染结果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appw"> <ol> <li v-for="(site, index) in sites"> {{ index }} -{{ site.text }} </li> </ol></div><script>const appW = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(appW).mount('#appw')</script>第一列的，1、2、3 是 li 列表带来的，第二列的 0、1、2 是索引值带来的。
若让索引值从 1 开始，可参考如下代码。
{{ index+1 }} -{{ site.text }}v-for 在模板 <template> 中使用 v-for：
<template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template><script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul></div><script>const app = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染结果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appe"> <ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul></div><script>const appE = { data() { return { sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }}
Vue.createApp(appE).mount('#appe')</script>v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
<script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul></div>
<script>const app = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染结果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appr"> <ul> <li v-for="value in object"> {{ value }} </li> </ul></div>
<script>const appR = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(appR).mount('#appr')</script>v-for 迭代对象第二参数：键名
你也可以提供第二个的参数为键名：
<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li><script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul></div>
<script>const app = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染结果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appt"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul></div>
<script>const appT = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(appT).mount('#appt')</script>v-for 迭代对象第三个参数：索引
<li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li><script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul></div>
<script>const app = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(app).mount('#app')</script>原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appy"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul></div>
<script>const appY = { data() { return { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }}
Vue.createApp(appY).mount('#appy')</script>v-for 迭代整数
<li v-for="n in 10"> {{ n }} </li><script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul></div>
<script> Vue.createApp(app).mount('#app')</script>浏览器渲染效果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appu"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul></div>
<script> Vue.createApp(appu).mount('#appu')</script>显示过滤/排序后的结果
<script src="https://unpkg.com/vue@next"></script><div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul></div>
<script>const app = { data() { return { numbers: [ 1, 2, 3, 4, 5 ] } }, computed: { evenNumbers() { return this.numbers.filter(number => number % 2 === 0) } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="appa"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul></div>
<script>const appA = { data() { return { numbers: [ 1, 2, 3, 4, 5 ] } }, computed: { evenNumbers() { return this.numbers.filter(number => number % 2 === 0) } }}
Vue.createApp(appA).mount('#appa')</script>v-for/v-if 联合使用
联合使用 v-for/v-if 给 select 设置默认值：
<script src="https://unpkg.com/vue@next"></script><div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!-- 索引为 1 的设为默认值，索引值从0 开始--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>您选中了:{{selOption}}</div></div>
<script>const app = { data() { return { selOption: "Runoob", sites: [ {id:1,name:"Google"}, {id:2,name:"Runoob"}, {id:3,name:"Taobao"}, ] }
}, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } }}
Vue.createApp(app).mount('#app')</script>浏览器渲染效果
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><div id="apps"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!-- 索引为 1 的设为默认值，索引值从0 开始--> <option v-if="index == 1" :value="site.name" selected="">{{site.name}}</option> <option v-else="" :value="site.name">{{site.name}}</option> </template> </select> <div>您选中了:{{selOption}}</div></div>
<script>const appS = { data() { return { selOption: "Runoob", sites: [ {id:1,name:"Google"}, {id:2,name:"Runoob"}, {id:3,name:"Taobao"}, ] }
}, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } }}
Vue.createApp(appS).mount('#apps')</script>组件
如果你还没了解组件的内容，可以先跳过这部分。
在自定义组件上，你可以像在任何普通元素上一样使用 v-for：
<my-component v-for="item in items" :key="item.id"></my-component>