随着 web 应用的日益普及，选项卡切换成为了一个常见的交互方式。在 Vue.js 中，我们可以通过组件化的思想来实现选项卡切换，本文将介绍如何利用 Vue.js 实现选项卡切换。
HTML 结构设计
首先，我们需要为选项卡设计 HTML 结构。以下是一个基本的选项卡结构：
<div class="tabs">
<div class="tab-list">
<div :class="{'active': activeTab === tab}" @click="activeTab = tab" v-for="tab in tabs">{{tab}}</div>
</div>
<div class="tab-content">
<slot></slot>
</div>
</div>其中，.tabs 是整个选项卡组件的容器，.tab-list 是选项卡标签的容器，.tab-content 是选项卡内容的容器。
在标签容器中，我们使用了 Vue.js 的 v-for 指令来遍历选项卡数组，并使用 @click 事件绑定了每个标签的点击事件。在内容容器中，我们使用了 slot 插槽来接收子组件传递的内容。
Vue.js 组件实现
接下来，我们需要在 Vue.js 中实现选项卡组件。这里提供一个选项卡组件的基本实现，你可以根据实际需求进行修改：
-- -------------------- ---- -------
--------------------- -
------ ---------
------ -
------ -
---------- ------------
-
--
--------- -
---- -------------
---- -----------------
---- ------------------ --------- --- ----- ----------------- - ---- ---------- -- -------------------
------
---- --------------------
-------------
------
------
-
--在组件中，我们使用了 props 来接收选项卡数组，使用 data 来初始化默认选项卡，使用 template 来定义组件的 HTML 结构。同时，我们使用了 Vue.js 的条件渲染和事件绑定来实现选项卡的切换。
示例代码
下面给出一个配置了选项卡的示例代码：
<tabs :tabs="['Tab 1', 'Tab 2', 'Tab 3']">
<div v-for="(tab, index) in 3" :key="index" v-show="activeTab === 'Tab ' + (index + 1)">
<p>This is Tab {{index + 1}} content</p>
</div>
</tabs>在示例代码中，我们传递了一个包含三个标签的数组给选项卡组件，并通过 v-for 指令生成了三个 div 容器来分别显示选项卡的内容。同时，我们使用 v-show 指令来根据当前选项卡判断哪个容器应该被显示。
总结
本文介绍了在 Vue.js 中实现选项卡切换的方法，对于 Vue.js 初学者来说，这是一个不错的练习项目。同时，选项卡组件也是一个常见的 UI 组件，学习如何实现选项卡切换可以对日后的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2c12bf6b2d6eab3e04de0