显示 VueJS 中哪个选项卡处于活动状态 - Javascript

在VueJS中，经常需要创建选项卡或选项卡组件。当用户与选项卡进行交互时，我们需要知道哪个选项卡处于活动状态。在本文中，我们将介绍如何在VueJS中显示哪个选项卡处于活动状态。

代码示例

下面是一个示例代码片段。我们将创建一个选项卡组件，并显示哪个选项卡是活动的。

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: isActive(index) }" @click="setActiveTab(index)">
        {{ tab }}
      </li>
    </ul>
    <div v-for="(tabContent, index) in tabContents" :key="index" v-show="isActive(index)">
      {{ tabContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ["Tab 1", "Tab 2", "Tab 3"],
      tabContents: ["Tab 1 content", "Tab 2 content", "Tab 3 content"],
    };
  },
  methods: {
    isActive(index) {
      return this.activeTab === index;
    },
    setActiveTab(index) {
      this.activeTab = index;
    },
  },
};
</script>

<style>
li.active {
  background-color: #ccc;
}
</style>

在上面的代码中，我们定义了 tabs 和 tabContents 数组，用于存储选项卡和选项卡内容的名称。activeTab 存储当前活动选项卡的索引。

在模板中，我们使用了 v-for 循环遍历 tabs 数组，并将它们渲染为一个列表。我们还向选项卡元素添加了一个 active 类，该类在当前选项卡处于活动状态时会被应用。

我们使用 v-show 指令在模板中渲染选项卡内容。条件是它必须具有与当前选项卡相同的索引，以便将其渲染为活动选项卡内容。

在 JavaScript 部分，我们定义了 isActive 和 setActiveTab 方法。isActive 方法用于检查给定索引的选项卡是否处于活动状态。如果是，则返回 true。否则，返回 false。

setActiveTab 方法用于将给定索引的选项卡设置为活动状态。

最后，我们在样式部分定义了一个带有 active 类的样式，以便在样式上更改当前选项卡的外观。

结论

在VueJS中，显示哪个选项卡处于活动状态非常简单。您只需要保存当前处于活动状态的选项卡索引，并在模板和 JavaScript 部分中使用它即可。