模版--列表渲染：v-for

=后面写遍历的语法

index可写可不写

 

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index}}
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
// const items = ['Item1', 'Item2', 'Item3']
import { ref, onMounted } from 'vue';

// 创建一个 ref，用于存储从后端获取的数据
const items = ref([]);

// 在组件加载后从后端获取数据并更新 items
onMounted(async () => {
  try {
    const response = await fetch('https://example.com/items'); // 替换为实际的后端接口地址
    const data = await response.json();
    items.value = data.items; // 假设后端返回的数据结构中有一个名为 items 的属性
  } catch (error) {
    console.error('Error fetching data from backend:', error);
  }
});
</script>