1. 在你的组件中引入 Tab 组件：
<template>
<vant-tabs v-model="activeTab" @change="onChange">
<vant-tab title="标签1">
<!-- 标签1的内容 -->
</vant-tab>
<vant-tab title="标签2">
<!-- 标签2的内容 -->
</vant-tab>
<!-- 可以有多个 vant-tab 标签，每个标签对应一个页面 -->
<!-- 更多标签... -->
</vant-tabs>
</template>
<script>
import { Tabs, Tab } from 'vant';
export default {
components: {
[Tabs.name]: Tabs,
[Tab.name]: Tab,
},
data() {
return {
activeTab: 0, // 当前激活的标签页索引，从0开始
};
},
methods: {
onChange(index) {
// 处理标签页切换的逻辑
console.log('当前标签页索引:', index);
},
},
};
</script>
在这个示例中：
- v-model="activeTab" 用于双向绑定当前激活的标签页索引。
- @change 事件会在标签页切换时触发，你可以在 onChange 方法中处理标签页切换的逻辑。
- 每个 vant-tab 标签内可以放置对应标签的内容。
你可以根据实际需求添加其他属性或者定制样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5767/Vant