vue简单折叠面板代码
时间: 2023-06-02 13:03:29 浏览: 63
好的,以下是一个简单的Vue折叠面板代码示例:
```
<template>
<div class="accordion">
<div class="accordion-item" v-for="(item, index) in items" :key="index">
<div class="accordion-header" @click="toggleItem(index)">
{{ item.title }}
<span class="accordion-arrow" :class="{ 'is-active': item.isActive }">
<i class="fas fa-chevron-down"></i>
</span>
</div>
<div class="accordion-body" v-show="item.isActive">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
title: 'Item 1',
content: 'Content 1',
isActive: false,
},
{
title: 'Item 2',
content: 'Content 2',
isActive: false,
},
{
title: 'Item 3',
content: 'Content 3',
isActive: false,
},
],
};
},
methods: {
toggleItem(index) {
this.items[index].isActive = !this.items[index].isActive;
},
},
};
</script>
<style>
.accordion {
width: 100%;
}
.accordion-item {
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
cursor: pointer;
}
.accordion-arrow {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.accordion-arrow.is-active {
transform: rotate(180deg);
}
.accordion-body {
padding: 15px;
background: #f5f5f5;
}
</style>
```
以上是一个基于Vue实现的折叠面板组件代码,希望能够帮到你!