vue2制作电子相册代码
时间: 2023-11-28 20:02:05 浏览: 56
以下是一个简单的示例,使用 Vue2 和一些基本的 CSS 样式创建电子相册:
HTML 代码:
```html
<div id="app">
<div class="album">
<div class="album-cover">
<img src="album-cover.jpg" alt="Album Cover">
</div>
<div class="album-photos">
<div v-for="photo in photos" class="album-photo">
<img :src="photo.src" :alt="photo.caption">
<div class="photo-caption">{{ photo.caption }}</div>
</div>
</div>
</div>
</div>
```
Vue 实例:
```javascript
new Vue({
el: '#app',
data: {
photos: [
{ src: 'photo1.jpg', caption: 'Photo 1' },
{ src: 'photo2.jpg', caption: 'Photo 2' },
{ src: 'photo3.jpg', caption: 'Photo 3' },
{ src: 'photo4.jpg', caption: 'Photo 4' },
{ src: 'photo5.jpg', caption: 'Photo 5' },
]
}
})
```
CSS 样式:
```css
.album {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 50px;
}
.album-cover img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
}
.album-photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
}
.album-photo {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px;
}
.album-photo img {
width: 200px;
height: 200px;
object-fit: cover;
}
.photo-caption {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
```
这是一个基本的示例,你可以根据你的需求进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)