vue 折叠面板 请用代码实例
时间: 2024-04-12 20:31:15 浏览: 11
当然可以!以下是一个使用Vue的折叠面板的示例代码:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<button @click="togglePanel(index)">
{{ item.title }} - {{ item.isExpanded ? '展开' : '收起' }}
</button>
<div v-show="item.isExpanded">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
title: '面板1',
isExpanded: false,
content: '面板1的内容'
},
{
title: '面板2',
isExpanded: false,
content: '面板2的内容'
},
{
title: '面板3',
isExpanded: false,
content: '面板3的内容'
}
]
};
},
methods: {
togglePanel(index) {
this.items[index].isExpanded = !this.items[index].isExpanded;
}
}
};
</script>
```
这个示例使用`v-for`指令遍历一个`items`数组,每个元素代表一个折叠面板。点击按钮时,通过`togglePanel`方法来切换面板的展开和收起状态。`v-show`指令根据面板的展开状态来控制面板的显示和隐藏。
你可以根据自己的需求修改示例代码,添加更多的折叠面板或自定义样式。希望对你有帮助!