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>浏览器渲染结果
- {{ site.text }}
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>浏览器渲染结果
- {{ index }} -{{ site.text }}
第一列的，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>浏览器渲染结果
- {{ site.text }}
- --------------
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>浏览器渲染结果
- {{ value }}
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>浏览器渲染结果
- {{ key }} : {{ value }}
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>- {{ index }}. {{ key }} : {{ value }}
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>浏览器渲染效果
- {{ n }}
显示过滤/排序后的结果
<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>浏览器渲染
- {{ n }}
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>浏览器渲染效果
您选中了:{{selOption}}
组件
如果你还没了解组件的内容，可以先跳过这部分。
在自定义组件上，你可以像在任何普通元素上一样使用 v-for：
<my-component v-for="item in items" :key="item.id"></my-component>
