vue3做一个包含多张图片和标题的循环

在Vue 3中，你可以使用`v-for`指令来创建包含多张图片和标题的循环。首先，你需要在数据对象中定义一个包含图片链接和标题的数组。然后，在模板中使用`v-for`来遍历这个数组，并为每张图片及其对应的标题生成相应的HTML代码。

这里有一个简单的例子：

// 假设你已经在Vue 3的组件中定义了data函数，它返回一个对象
data() {
  return {
    images: [
      { src: '图片链接1', title: '标题1' },
      { src: '图片链接2', title: '标题2' },
      { src: '图片链接3', title: '标题3' }
      // 可以根据需要添加更多图片对象
    ]
  }
}

在模板中，你可以这样使用`v-for`来循环显示图片和标题：

<template>
  <div>
    <div v-for="image in images" :key="image.src">
      <img :src="image.src" :alt="image.title">
      <h3>{{ image.title }}</h3>
    </div>
  </div>
</template>

在这个例子中，`:key`属性用于跟踪每个节点的身份，以便重用和重新排序现有元素。`src`和`:src`分别用于绑定图片的源地址，`:alt`用于绑定图片的替代文本。