- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 493字
- 2022-07-29 14:27:42
4.2.2 列表渲染
列表渲染：用v-for指令根據一組數組的選項列表進行渲染。v-for指令需要采用item in items形式的特殊語法，其中items是源數據數組且是數組元素迭代的別名。
代碼如下：
<div class="app">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
<script>
data:{
items:[
{text:"name"},
{text:"age"},
{text:"like"}
]
}
</script>
渲染結果如下所示。
<div class="exp">
<ul>
<li>name</li>
<li>age</li>
<li>like</li>
</ul>
</div>
v-for還支持一個可選的第二個參數為當前項的索引。代碼如下：
<div class="exp">
<ul>
<li v-for="item,index in items">{{index}}-{{item.text}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
items:[
{text:'name'},
{text:'age'},
{text:'like'}
]
}
})
</script>
運行的效果如圖4-10所示。
圖4-10 v-for運行效果圖（一）
可以使用v-for通過一個對象的屬性來迭代。代碼如下：
<div class="app">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
obj:{
firstname:"歐陽",
lastname:"靜靜",
age:18
}
}
})
</script>
運行的效果如圖4-11所示。
圖4-11 v-for運行效果圖（二）
當v-for與v-if一起使用時，v-for具有比v-if更高的優先級，這意味著v-if將分別重復運行于每個v-for循環中。為某些項目渲染節點時，運用v-for與v-if較多。代碼如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
而如果想要有條件地跳過循環執行，那么可以將v-if置于外層元素（或<template>）上。代碼如下：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos!</p>
在Vue 2.2.0以上的版本中，如果要在組件中使用v-for，必須使用key。代碼如下：
<my-component v-for="(item,index) in itmes" v-bind:key="index"></my-component>
雖然在自定義組件中可以使用v-for，但是，v-for不能自動傳遞數據到組件中，因為組件有自己獨立的作用域。為了傳遞迭代數據到組件中，需要使用props。代碼如下：
下面用詳細的代碼介紹列表渲染。
Vue的列表渲染其實就是通過指令v-for將一組數據渲染到頁面中，這一組數據可以是數組，抑或是對象。