<div id="app">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <!-- 透過 click 切換 current 的值 (有 .active 的元件才有底色) -->
      <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍綠色元件</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
    </li>
  </ul>

  <div class="mt-3">
    <!-- 使用 v-if 切換顯示 -->
    <primary-component :data="item" v-if="current === 'primary-component'"></primary-component>
    <danger-component :data="item" v-if="current === 'danger-component'"></danger-component>
  </div>
</div>

<!-- primaryComponent -->
<script type="text/x-template" id="primaryComponent">
  <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">{{ data.header }}</div>
    <div class="card-body">
      <h5 class="card-title">{{ data.title }}</h5>
      <p class="card-text">{{ data.text }}</p>
    </div>
  </div>
</script>

<!-- dangerComponent -->
<script type="text/x-template" id="dangerComponent">
  <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">{{ data.header }}</div>
    <div class="card-body">
      <h5 class="card-title">{{ data.title }}</h5>
      <p class="card-text">{{ data.text }}</p>
    </div>
  </div>
</script>
Vue.component("primary-component", {
  props: ["data"],
  template: "#primaryComponent",
});

Vue.component("danger-component", {
  props: ["data"],
  template: "#dangerComponent",
});

var app = new Vue({
  el: "#app",
  data: {
    item: {
      header: "這裡是 header",
      title: "這裡是 title",
      text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim perferendis illo reprehenderit ex natus earum explicabo modi voluptas cupiditate aperiam, quasi quisquam mollitia velit ut odio vitae atque incidunt minus?"
    },
    // 透過 click 切換 current 的值
    current: "primary-component",
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js