uni-app学习笔记九-vue3 v-for指令

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

html 复制代码

<template>
	<view v-for="(item,index) in 10" :key="index">
		box模块-{{index+1}}
	</view>
	<view v-for="item in students" :key="item.id">
		姓名：{{item.name}} , 年龄：{{item.age}}
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const students = ref([
		{"id":1,"name":"Jim","age":10},
		{"id":2,"name":"Tim","age":11},
		{"id":3,"name":"Jimy","age":12}
	])
</script>

小程序上的效果：

与 v-if 类似，可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

html 复制代码

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

template在编译后不展示，没有破坏<ul><li>结构

`v-for` 与 `v-if`

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

html 复制代码

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外先包装一层 <template> 再在其上使用 v-for 可以解决这个问题

html 复制代码

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

注意：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

通过 key 管理状态

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，需要为每个元素对应的块提供一个唯一的 key attribute：

html 复制代码

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上

html 复制代码

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

注意：key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

uni-app学习笔记九-vue3 v-for指令

v-for 与 v-if​

通过 key 管理状态

`v-for` 与 `v-if`