基本数据类型:有两种循环方式如下:
<p v-for="item in names" :key="item">{{item}}</p>
<p v-for="(item,index) in names" :key="index">{{item}}</p>
<script setup>
import {ref,reactive,computed} from "vue";
const names=ref(["小猫","小狗","小猪"]);
</script>
<template>
<div class="home">
<p v-for="item in names" :key="item">{{item}}</p>
<p v-for="(item,index) in names" :key="index">{{item}}</p>
</div>
</template>
<style scoped>
</style>
对象类型需要item.属性名称,如下:
<script setup>
import {ref,reactive,computed} from "vue";
const names=ref([{name:"小猫"},{name:"小狗"},{name:"小猪"}]);
</script>
<template>
<div class="home">
<p v-for="(item,index) in names" :key="index">{{item.name}}</p>
</div>
</template>
<style scoped>
</style>