数组对象和对象数组 的渲染列表

<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>