在 Vue.js 中，我们可以使用 v-bind 指令将数据动态绑定到 HTML 元素上，从而根据数据的变化来控制元素的状态。为了显示哪个选项卡处于活动状态，我们可以使用 v-bind:class 指令来动态添加或移除 CSS 类。

下面是一个示例：

<template>
  <div>
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ active: activeTab === index }"
      @click="activeTab = index"
    >
      {{ tab }}
    </div>
    
    <div>
      <!-- 根据 activeTab 的值显示对应的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      activeTab: 0
    };
  }
};
</script>

<style>
.active {
  /* 添加活动状态的样式 */
}
</style>

在上面的代码中，我们使用了一个 v-for 循环渲染了所有的选项卡，并使用 v-bind:class 指令来动态绑定元素的 CSS 类。通过判断 activeTab 的值是否等于当前循环的索引值（index），如果相等则给元素添加 active 类，实现了活动状态的显示。

注意，在 CSS 样式中，我们定义了一个 .active 类来表示活动状态的样式，请根据自己的需求来定义和调整该样式。

这样，我们就可以根据不同的活动状态来显示不同的选项卡内容了。