[TOC] ## 列表渲染指令v-for 我們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組并且 item 是數組元素迭代的別名。v-for 還支持一個可選的第二個參數index為當前項的索引。 示例： ``` <!-- 在這種嵌套循環的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 --> <template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for="(item, itemIndex) in card" :key="itemIndex"> {{item.value}} </view> </scroll-view> </template> ``` 為了能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id，它的工作方式類似于一個屬性，所以你需要用 v-bind 來綁定動態值。 > uni-app中嵌套列表渲染，必須指定不同的索引！需要填寫:key="xx"，或者v-bind:key=”xx”。 以下的示例演示了如何結合v-show指令和v-for指令條件輸出，并使用Flex布局生成表格輸出。 > 本例演示了Flex布局的垂直居中和水平居中，表格的每一列占屏幕寬度的1/3。 * [ ] pages/lab/gramma/vfor.vue ``` <!-- pages/lab/gramma/vfor.vue --> <template> <view style="flex-direction: column; flex: 1; justify-content: center;"> <view> <view class="table-item">索引</view> <view class="table-item">姓名</view> <view class="table-item">年齡</view> </view> <block v-for="(item, index) in students" :key="index"> <view v-if="item.age >=20"> <view class="table-item">{{index}}</view> <view class="table-item">{{item.name}}</view> <view class="table-item">{{item.age}}</view> </view> </block> </view> </template> <script> export default { data() { return { students: [{ name: "張三", age: 18 }, { name: "李四", age: 20 }, { name: "王五", age: 21 } ] } } } </script> <style> view { display: flex; flex-direction: row; } .table-item { display: flex; flex: 1; justify-content: center; align-items: center; } </style> ```  ### [key](https://uniapp.dcloud.io/use?id=key) 如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如`<input>`中的輸入內容，`<switch>`的選中狀態），需要使用`:key`來指定列表中項目的唯一的標識符。 `:key`的值以兩種形式提供 * 使用`v-for`循環`array`中`item`的某個`property`，該`property`的值需要是列表中唯一的字符串或數字，且不能動態改變。 * 使用`v-for`循環中`item`本身，這時需要`item`本身是一個唯一的字符串或者數字 當數據改變觸發渲染層重新渲染的時候，會校正帶有`key`的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。 **如不提供`:key`，會報一個`warning`， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。** **示例：** ~~~ <template> <view> <!-- array 中 item 的某個 property --> <view v-for="(item,index) in objectArray" :key="item.id"> {{index +':'+ item.name}} </view> <!-- item 本身是一個唯一的字符串或者數字時，可以使用 item 本身 --> <view v-for="(item,index) in stringArray" :key="item"> {{index +':'+ item}} </view> </view> </template> <script> export default { data () { return { objectArray:[{ id:0, name:'li ming' },{ id:1, name:'wang peng' }], stringArray:['a','b','c'] } } } </script> ~~~