<div id="app">
<ul>
<li v-for='user in users' :key="user.id>
{
{user.name}} - {
{user.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'app',
data: {
users: [
{id:1, name: 'Alice', age:30},
{id:2, name: 'Bob', age:25},
{id:3, name: 'Charlie', age:35)
]
}
})
</script>// Vue3模式
<template>
<div>
<ul>
<li v-for="(item,index) in users" :key="item.id">
{
{ item.name }} - {
{ item.age }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const users = ref([
{ id: 1, name: 'Alice', age: 30 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 35 }
]);
</script>const users = [
{id:1, name: 'Alice', age:30},
{id:2, name: 'Bob', age:25},
{id:3, name: 'Charlie', age:35)
]对象数组
<div id="app">
<ul>
<h2>{
{company.name}}</h2>
<li v-for="employee in company.employees" :key="employee.id>
{
{employee.name}} - {
{employee.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'app',
data: {
company:{
name: 'Tech',
emploees: [
{id:1, name: 'Alice', age:30},
{id:2, name: 'Bob', age:25},
{id:3, name: 'Charlie', age:35)
]
}
}
})
</script>#Vue3模式
<template>
<div>
<ul>
<h2>{
{company.name}}</h2>
<li v-for="employee in company.employees" :key="employee.id>
{
{employee.name}} - {
{employee.age}}
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const company = ref({
name: 'Tech',
emploees: [
{id:1, name: 'Alice', age:30},
{id:2, name: 'Bob', age:25},
{id:3, name: 'Charlie', age:35)
]
});
</script>