v-for列表渲染

我们可以使用 v-for 指令在数组的基础上渲染一个列表。v-for 指令的值需要使用 item in arrObj形式的特殊语法，其中 arrObj是源数据的数组，而 item 是迭代项的别名：

<view v-for="item in arrObj">
		名称:{{item.name}}，年龄{{item.age}}
	</view>

<script setup>
import { ref } from 'vue';
const arrObj=ref([
	{name:"张三",age:10},
	{name:"李四",age:20},
	{name:"王五",age:30},
])
</script>

v-for 也支持使用可选的第二个参数表示当前位置的索引。

<view v-for="(item,index) in arrObj">
		名称:{{item.name}}，年龄{{item.age}}，
		索引：{{index}}
	</view>

 但是我们在运行微信小程序时会报这样一个错

 我们只需要再加上一个v:bind（简写‘’:‘）就行了，key一般都是唯一的，可以使用对象的一个id。

<view v-for="(item,index) in arrObj" :key="item.id">
		名称:{{item.name}}，年龄{{item.age}}，
		索引：{{index}}
	</view>

<script setup>
import { ref } from 'vue';
const arrObj=ref([
	{id:1,name:"张三",age:10},
	{id:2,name:"李四",age:20},
	{id:3,name:"王五",age:30},
])
</script>

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

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

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

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

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