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

=后面写遍历的语法

index可写可不写

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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