Vant Collapse 组件是实现手机端折叠面板的组件库。

import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';

Vue.use(Collapse);
Vue.use(CollapseItem);

通过v-model控制展开的面板列表，activeNames为

<van-collapse v-model="activeNames">
  <van-collapse-item title="1" name="1"></van-collapse-item>
  <van-collapse-item title="2" name="2"></van-collapse-item>
  <van-collapse-item title="3" name="3" disabled></van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};

通过accorn可以设置为手风琴模式，最多展开面板，此时activeName为字符串格式

<van-collapse v-model="activeName" accorn>
  <van-collapse-item title="1" name="1"></van-collapse-item>
  <van-collapse-item title="2" name="2"></van-collapse-item>
  <van-collapse-item title="3" name="3"></van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeName: '1'
    };
  }
};

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <div slot="title">1 <van-icon name="question-o" /></div>
    
  </van-collapse-item>
  <van-collapse-item title="2" name="2" icon="shop-o">
    
  </van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};

API

演示