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

芷帆 · 发表于 2021-7-9 09:47:00

在 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/>

来源：https://www.cnblogs.com/twilight-sparkle/p/14989230.html