Vant 的 Tab(标签页)组件用于在页面中创建一组可切换的标签页,通常用于展示不同的内容或功能模块。以下是一个简单的 Vant Tab 组件的示例:
<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="标签一">内容一</van-tab>
      <van-tab title="标签二">内容二</van-tab>
      <van-tab title="标签三">内容三</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 当前选中的标签索引
    };
  },
};
</script>

在这个示例中,<van-tabs> 组件用于创建标签页容器,通过 v-model 双向绑定 active 属性,指定当前选中的标签索引。在 <van-tabs> 内部使用 <van-tab> 组件表示每个标签页,通过 title 属性设置标签的标题,标签页的内容写在 <van-tab> 内。

你可以根据项目的需求在标签页内添加不同的内容,例如表单、列表、图表等。标签页会根据用户的点击自动切换内容。

确保已正确安装和引入 Vant,以及按照文档进行配置。


转载请注明出处:http://www.zyzy.cn/article/detail/5699/Vant