vue3 json

// Vue 3 示例代码：使用 JSON 数据

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 定义一个响应式变量来存储用户数据
    const users = ref([]);

    // 模拟从服务器获取 JSON 数据
    const fetchUsers = async () => {
      try {
        // 这里可以替换为实际的 API 请求，例如 fetch('/api/users')
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        users.value = data;
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    };

    // 组件挂载时调用 fetchUsers 函数
    onMounted(fetchUsers);

    return {
      users,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 8px 0;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历 users 数组，并为每个用户生成一个 <li> 元素。
   • :key="user.id" 确保每个列表项都有唯一的标识符，以提高渲染性能。

2. 脚本部分 (<script>):

   • 使用 ref 创建一个响应式的 users 变量，用于存储从服务器获取的用户数据。
   • fetchUsers 函数模拟从服务器获取 JSON 数据，并将其赋值给 users。
   • onMounted 钩子在组件挂载后调用 fetchUsers 函数，确保数据在组件初始化时加载。

3. 样式部分 (<style scoped>):

   • 定义了一些简单的样式，确保列表看起来更整洁。scoped 属性确保这些样式只应用于当前组件。

如果你有其他问题或需要进一步的帮助，请告诉我！