vue用v-for写图片手风琴效果
时间: 2023-08-03 09:05:13 浏览: 89
你可以使用Vue的`v-for`指令结合CSS来创建图片手风琴效果。下面是一个简单的示例:
```html
<template>
<div class="accordion">
<div class="accordion-item" v-for="(image, index) in images" :key="index">
<img :src="image.url" alt="Image">
<div class="content" :class="{ 'active': activeIndex === index }">
<p>{{ image.description }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{
url: 'image1.jpg',
description: 'Image 1 description'
},
{
url: 'image2.jpg',
description: 'Image 2 description'
},
// Add more images here
],
activeIndex: null
};
},
methods: {
toggleAccordion(index) {
this.activeIndex = (this.activeIndex === index) ? null : index;
}
}
};
</script>
<style>
.accordion {
display: flex;
flex-wrap: wrap;
}
.accordion-item {
flex: 1 0 33%; /* Adjust this value as per your layout */
position: relative;
overflow: hidden;
transition: flex-basis 0.3s ease;
}
.accordion-item img {
width: 100%;
}
.content {
background-color: #f1f1f1;
padding: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.content.active {
max-height: 200px; /* Adjust this value as per your content */
}
</style>
```
在上面的示例中,我们使用`v-for`指令遍历`images`数组,并为每个图片创建一个手风琴项。点击手风琴项时,通过`toggleAccordion`方法切换`activeIndex`的值,以展开或折叠内容部分。CSS样式定义了手风琴的布局和过渡效果。
请确保将`image1.jpg`和`image2.jpg`替换为你自己的图片路径,并根据需要调整样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)