vant html,vant tab list,vant 页面跳转,vant可以用script标签引入吗,vant 图标,vant tabs
Vant3 Tab 标签页是一个基于 Vue.js 框架开发的可嵌套、可切换的组件。它可以将不同的内容以标签页的形式进行展示，让用户轻松地在多个内容之间进行切换。

Vant3 Tab 标签页包含以下特点：

- 支持自定义样式和事件；
- 支持在底部和顶部位置之间切换；
- 支持左右滑动切换；
- 支持粘性定位（在页面滚动时保持 Tab 在屏幕顶部）；
- 支持异步加载内容等。

以下是一个简单的 Vant3 Tab 标签页的示例代码：


<template>
<van-tabs v-model="activeTab" @click="onClick">
<van-tab title="标签一">标签一的内容</van-tab>
<van-tab title="标签二">标签二的内容</van-tab>
<van-tab title="标签三">标签三的内容</van-tab>
</van-tabs>
</template>

<script>
import { ref } from 'vue';
import { Tabs, Tab } from 'vant';

export default {
components: {
[Tabs.name]: Tabs,
[Tab.name]: Tab,
},
setup() {
const activeTab = ref(0);
const onClick = (index) => {
console.log(点击了第 ${index} 个标签页);
};

return {
activeTab,
onClick,
};
},
};
</script>


在上面的示例中，我们导入了 Vant3 Tab 标签页的组件，并在模板中使用了 van-tabs 和 van-tab 组件来创建标签页。每个 van-tab 组件都包含一个 title 属性和一些内容，它们将在标签页上显示。通过 v-model 指令可以设置当前选中的标签页，而 @click 事件可以监听用户点击标签页的行为，并执行相应的逻辑。