elementui点击导航栏在下方显示
时间: 2023-10-14 19:21:23 浏览: 32
您可以使用 Element UI 的 Tabs 组件来实现这个功能。您可以将导航栏作为 Tabs 组件的选项卡,将对应的内容作为 Tabs 组件的标签页内容。当用户点击导航栏时,可以根据选项卡的 index 值来控制显示对应的标签页内容。以下是一个示例代码:
```html
<template>
<div>
<el-tabs v-model="activeTab">
<el-tab-pane label="选项卡一">标签页一的内容</el-tab-pane>
<el-tab-pane label="选项卡二">标签页二的内容</el-tab-pane>
<el-tab-pane label="选项卡三">标签页三的内容</el-tab-pane>
<el-tab-pane label="选项卡四">标签页四的内容</el-tab-pane>
</el-tabs>
<ul>
<li @click="activeTab = 0">选项卡一</li>
<li @click="activeTab = 1">选项卡二</li>
<li @click="activeTab = 2">选项卡三</li>
<li @click="activeTab = 3">选项卡四</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0
}
}
}
</script>
```
在上面的示例中,我们将导航栏作为一个 ul 列表,每个 li 的点击事件都会改变 activeTab 的值,从而控制显示对应的标签页内容。