v-if 와 v-show

      <el-menu-item ref="home" index="home">홈</el-menu-item>
      <el-menu-item v-if="!logged" ref="login" index="login">로그인</el-menu-item>
      <el-menu-item v-if="logged" ref="logout" index="logout">로그아웃</el-menu-item>
      <el-menu-item v-if="logged" ref="mypage2" index="mypage2">마이페이지</el-menu-item>
      <el-menu-item v-if="!logged" ref="join" index="join">회원가입</el-menu-item>
      

위와 같은 코드에

changeLogged(path) {

      this.$refs[path].$el.click();
    },

(자세한 부분은 생략)클릭하면 ref를 찾아 hover 효과를 주는 메소드가 있다.
하지만 !logged상태에서 mypage2나 logout을 클릭하면

위와 같이 찾을 수 없다고 나온다.
그 이유는 v-if는 true면 렌더링하고 false면 렌더링하지 않기 때문이다.
이를 해결하는 방법은 v-show다.

      <el-menu-item ref="home" index="home">홈</el-menu-item>
      <el-menu-item v-show="!logged" ref="login" index="login">로그인</el-menu-item>
      <el-menu-item v-show="logged" ref="logout" index="logout">로그아웃</el-menu-item>
      <el-menu-item v-show="logged" ref="mypage2" index="mypage2">마이페이지</el-menu-item>
      <el-menu-item v-show="!logged" ref="join" index="join">회원가입</el-menu-item>
      

v-show는 v-if 와 거의 동작이 비슷하다. 값이 true이면 화면에 표시된다.

이 둘의 차이점
이 둘의 가장 큰 차이점은 우선 v-if는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.

반면에 v-show 는 단순히 css 의 display 속성만 변경된다.