[Vue.js] 메뉴 탭 변경(라우터 사용 없이)

 

      <!-- 검색 -->
      <div v-if="activeTab === 'users'">
        <div class="search-bar">
          <input
            type="text"
            class="search-input"
            placeholder="Search..."
          >
          <button class="search-button">
            Search
          </button>
        </div>
      </div>
      <!-- 아바타 -->
      <div v-if="activeTab === 'avatar'">
        <div class="wrap_friend_list">
          <div>아바타와 대화해보세요!</div>
          <div class="my_profile">
            <div><img src="@assets/image74.png"></div>
            <div class="profile_info">
              <div>User Name</div>
              <div class="additional_info">
                additional information
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 설정 -->
      <div v-if="activeTab === 'settings'">
        <ul>
          <li>관리자에게 문의하기</li>
          <li>로그아웃</li>
        </ul>
      </div>
      <div class="tabbar">
        <div
          :class="{ 'active-tab': activeTab === 'users' }"
          @click="changeTab('users')"
        >
          <img
            class="tabbar_icon"
            src="@assets/people_black_24dp.svg"
          >
        </div>
        <div
          :class="{ 'active-tab': activeTab === 'avatar' }"
          @click="changeTab('avatar')"
        >
          <img
            class="tabbar_icon"
            src="@assets/icon_robot.svg"
          >
        </div>
        <div
          :class="{ 'active-tab': activeTab === 'settings' }"
          @click="changeTab('settings')"
        >
          <img
            class="tabbar_icon"
            src="@assets/icon_settings.svg"
          >
        </div>
      </div>

const activeTab = ref('search');
const changeTab = (tab: string) => {
  activeTab.value = tab;
};

.active-tab {
  filter: invert(49%) sepia(28%) saturate(3743%) hue-rotate(307deg) brightness(101%) contrast(103%);
}

 

 

라우터 사용할 때

https://blackpaw.tistory.com/64