bootstrap- Vue的‘b-tab`根据我导入的Vue构建的不同呈现不同

<template>
  <div>
    <b-tabs>
      <b-tab title="Tab 1" active>
        <p>这是第一个标签页的内容。</p>
      </b-tab>
      <b-tab title="Tab 2" v-if="showTab2">
        <p>这是第二个标签页的内容。</p>
      </b-tab>
      <b-tab title="Tab 3" v-if="showTab3">
        <p>这是第三个标签页的内容。</p>
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTab2: true,
      showTab3: false
    };
  }
};
</script>