uni-app中使用列表渲染v-for

在 v-for 里使用數組

v-for 指令可以實現基於一個數組來渲染一個列表。

• v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。
  • 第一個參數 item 則是被迭代的數組元素的別名。
  • 第二個參數，即當前項的索引 index ，是可選的。

    <template>
        <view>
            <view v-for="(item, index) in items">
                {{ index }} - {{ item.message }}
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    items: [
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ]
                }
            }
        }
    </script>

在 v-for 里使用對象

你也可以用 v-for 來遍歷一個對象的 property。

• 第一個參數 value 是被迭代的對象元素的屬性值。
• 第二個參數為 property 名稱 (也就是鍵名)。
• 第三個參數作為索引。

    <template>
        <view>
            <view v-for="(value, name, index) in object">
                 {{ index }}. {{ name }}: {{ value }}
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    object: {
                        title: 'How to do lists in Vue',
                        author: 'Jane Doe',
                        publishedAt: '2020-04-10'
                    }
                }
            }
        }
    </script>

列表渲染分組

類似於 v-if，你也可以利用帶有 v-for 的 template 來循環渲染一段包含多個元素的內容。比如：

    <template v-for="item in items">
        <view>{{ item.message }}</view>
        <view class="divider" role="presentation"></view>
    </template>

key

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 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>

注意事項

• 在H5平台 使用 v-for 循環整數時和其他平台存在差異，如 v-for="(item, index) in 10" 中，在H5平台 item 從 1 開始，其他平台 item 從 0 開始，可使用第二個參數 index 來保持一致。
• 在非H5平台 循環對象時不支持第三個參數，如 v-for="(value, name, index) in object" 中，index 參數是不支持的。
• 小程序端數據為差量更新方式，由於小程序不支持刪除對象屬性，使用的設置值為 null 的方式替代，導致遍歷時可能出現不符合預期的情況，需要自行過濾一下值為 null 的數據（相關反饋）。

在組件上使用 v-for

在自定義組件上，你可以像在任何普通元素上一樣使用 v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

當在組件上使用 v-for 時，key是必須的。

 

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用來進行 列表渲染 和 條件渲染。

<template/> 和 <block/> 並不是一個組件，它們僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

<block/> 在不同的平台表現存在一定差異，推薦統一使用 <template/>。

<template>
    <view>
        <block v-for="(item,index) in list" :key="index">
            <view>{{item}} - {{index}}</view>
        </block>
    </view>
</template>

列表渲染同樣推薦使用<template/>