vue3 ts script部分中遍历后端传过来的值，生成列表

在Vue3中使用TypeScript进行开发时，可以通过遍历后端传过来的数据来生成列表。以下是一个简单的示例：

首先，假设后端返回的数据是一个数组，每个元素都是一个对象，包含需要展示的信息。例如：

[
  { "id": 1, "name": "Alice", "age": 25 },
  { "id": 2, "name": "Bob", "age": 30 },
  { "id": 3, "name": "Carol", "age": 28 }
]

在Vue组件中，你可以使用`<script setup>`语法糖来简化代码。首先，你需要定义一个响应式变量来存储这个数组，然后通过API调用获取数据并赋值给这个变量。最后，使用`v-for`指令在模板中遍历这个数组，生成列表。

下面是具体的实现步骤：

1. 定义一个响应式变量来存储数据：

import { ref } from 'vue';

const users = ref([]);

2. 使用`onMounted`生命周期钩子来模拟从后端获取数据：

import { onMounted } from 'vue';

onMounted(() => {
  // 模拟API调用
  setTimeout(() => {
    users.value = [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Carol', age: 28 }
    ];
  }, 1000);
});

3. 在模板中使用`v-for`指令遍历`users`数组，并显示每个用户的信息：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }} years old
      </li>
    </ul>
  </div>
</template>

这样，当组件加载时，它会等待1秒钟（模拟网络延迟），然后更新`users`数组，并自动在页面上渲染出用户列表。每个列表项都显示了用户的姓名和年龄。