【零基础学会uniapp系列】4、列表渲染 v-for

项目部002

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 循环 部分

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：326576256

视频教程在线观看：https://www.eyuyan.tv/?mod=play&tvid=3215

课程课件和源码下载：【从资源网下载】
从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn

mywjt

论坛是在考虑转型吗

陈大奶么么哒

论坛是在考虑转型吗