写一个vue 相册展示代码
时间: 2023-05-18 10:06:57 浏览: 59
非常感谢您的提问,以下是一个简单的 Vue 相册展示代码:
<template>
<div>
<h1>{{ title }}</h1>
<div class="gallery">
<div v-for="(image, index) in images" :key="index" class="image">
<img :src="image.url" :alt="image.alt">
<p>{{ image.caption }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Gallery',
data() {
return {
title: 'My Gallery',
images: [
{
url: 'https://example.com/image1.jpg',
alt: 'Image 1',
caption: 'This is the first image'
},
{
url: 'https://example.com/image2.jpg',
alt: 'Image 2',
caption: 'This is the second image'
},
{
url: 'https://example.com/image3.jpg',
alt: 'Image 3',
caption: 'This is the third image'
}
]
}
}
}
</script>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.image {
margin: 10px;
text-align: center;
}
img {
max-width: 100%;
}
</style>