【零基础学会uniapp】第四课：列表渲染

【零基础学会uniapp】第四课：列表渲染

4、列表渲染 v-for
a. 基于数组的循环

• v-for 指令可以实现基于一个数组、对象来渲染一个列表。
• v-for 指令需要使用 item[,index] in items 形式的特殊语法，其中 items 是源数据数组，而 item
  则是被迭代的数组元素的别名

第一个参数 item ：是被迭代的数组元素的别名。

第二个参数 index：即当前项的索引 ，是可选的。

<template>
    <view>
        <view v-for="item,index in array">
            {{index}} : {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                array: [ 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 ],
            }
        }
    }
</script>

其中，array中的元素可以是对象类型：

针对对象类型，item表示的就是当前循环的对象

<template>
    <view>
        <view v-for="item,index in array">
            序号：{{index}}  ，姓名：{{item.name}} 分数：{{item.score}}
        </view>
    </view>
</template>
​
<script>
    export default {
        data() {
            return {
                array: [ {
                    name: "小强",
                    score: 98.5
                }, {
                    name: "小李",
                    score: 96
                }, {
                    name: "小张",
                    score: 97.5
                } ],
            }
        }
    }
</script>

b.基于对象的循环

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的 属性。

语法：v-for=“(value, name, index) in object”

第一个参数 value 是被迭代的对象元素的属性值。

第二个参数 name 是被迭代的对象元素的属性名 。

第三个参数index是当前的索引。

<template>
    <view>
        <view v-for="(value, name, index) in object">
            {{ index }}. {{ name }} : {{ value }}
            </view>
        </view>
</template>
<script>
    export default {
        data() {
            return {
                object: {
                title: '第四课：列表渲染 v-for',
                type: '视频教程',
                }
            }
        }
    }
</script>

列表渲染分组
类似于 v-if，你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容。比如：

<template v-for="(value, name, index) in object">
    <text style="font-size: 20px;">序号：{{index}},</text>
    <text style="font-size: 20px;">属性名：{{name}},</text>
    <text style="font-size: 20px;">属性值：{{index}}</text>
</template>

使用template和使用view的区别？

使用template时，外部将没有任何元素进行包裹。

如果使用view标签，那么将会有一层view标签。

具体可以通过使用F12探测窗口元素进行查看。

key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

• :key 的值需要提供一个唯一的id，不能是index

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<template>
    <view>
        <view v-for="(item, index) in array">
            {{item.name}} 分数：{{item.score}}
            <checkbox></checkbox>
        </view>
        <button @click="onclicked">删除第二个元素</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                array: [ {
                    id: 0,
                    name: "小强",
                    score: 98.5
                }, {
                    id: 1,
                    name: "小李",
                    score: 96
                }, {
                    id: 2,
                    name: "小张",
                    score: 97.5
                } ],
            }
        },
        methods: {
            onclicked() {
                this.array.splice( 1, 1 );//删除数组中的 第 2 个元素。
            }
        }
    }
</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是必须的。

本课引用链接：

• https://uniapp.dcloud.io/vue-basics?id=listrendering
• https://www.w3school.com.cn/js/js_loop_for.asp - for/in 循环 部分