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>