v-for
我们可以使用 v-for
指令基于一个数组来渲染一个列表。v-for
指令的值需要使用 item in items
形式的特殊语法,其中 items
是源数据的数组,而 item
是迭代项的别名:
<li v-for="item in items">
{{ item.message }}
</li>
在小程序中,必须加入key
<template>
<view class="out">
<view class="box" v-for="(item,index) in 10":key="index">box模块-{{index}}</view>
</view>
<view v-for="item in nba" :key="item.id">
球星{{item.name}}-球衣{{item.num}}
</view>
</template>
<script setup>
import { ref } from 'vue';
const nba = ref([
{id:1,name:"乔丹",num:23},
{id:2,name:"詹姆斯",num:6},
{id:3,name:"科比",num:24},
])
</script>
<style lang="scss" scoped>
</style>
v-for与v-if
同时使用 v-if
和 v-for
是不推荐的,因为这样二者的优先级不明显。