首先，确保你已经引入了 Vant 组件库，并按照官方文档的说明进行了设置。
<template>
<div>
<van-collapse v-model="activeNames">
<van-collapse-item title="面板 1" name="1">
<!-- 面板内容 1 -->
内容1
</van-collapse-item>
<van-collapse-item title="面板 2" name="2">
<!-- 面板内容 2 -->
内容2
</van-collapse-item>
<van-collapse-item title="面板 3" name="3">
<!-- 面板内容 3 -->
内容3
</van-collapse-item>
</van-collapse>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 默认展开的面板
};
}
};
</script>
在上述例子中，<van-collapse> 是整个折叠面板的容器，而 <van-collapse-item> 则是每个折叠面板的单独项，通过 title 属性设置每个面板的标题，通过 name 属性设置每个面板的唯一标识。v-model 绑定的 activeNames 决定了哪些面板是展开的。
你可以根据实际需求自定义面板的内容和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5679/Vant