<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