1-6. 렌더링 조건 (v-if, v-show)

 

 

 

v-if, v-else-if, v-else

 

<div v-if="userRole === 'G'">

      <button>조회</button>

    </div>

    <div v-else-if="userRole === 'M'">

      <button>조회</button>

      <button>생성</button>

    </div>

    <div v-else>

      <button>조회</button>

      <button>생성</button>

      <button>삭제</button>

    </div>

 

 

<template>
  <div>
    <div v-if="userRole === 'G'">
      <button>조회</button>
    </div>
    <div v-else-if="userRole === 'M'">
      <button>조회</button>
      <button>생성</button>
    </div>
    <div v-else>
      <button>조회</button>
      <button>생성</button>
      <button>삭제</button>
    </div>

    <div v-if="userRole === 'A'">
      <button>조회</button>
      <button>생성</button>
      <button>삭제</button>
    </div>
    <div v-else-if="userRole === 'M'">
      <button>조회</button>
      <button>생성</button>
    </div>
    <div v-else>
      <button>조회</button>
    </div>

    <button v-if="userRole === 'A' || userRole === 'M' || userRole === 'G'">
      조회
    </button>
    <button v-if="userRole === 'A' || userRole === 'M'">생성</button>
    <button v-if="userRole === 'A'">삭제</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      userRole: 'A' // A(Admin) - 관리자, M(Manager) - 매니저, G(General) - 일반사용자
    }
  },
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

 

 

v-show (v-if 와 차이)

v-show에 해당하는 부분은 이미 화면에 렌더링 되어 있다.

v-if는 조건에 해당되지 않으면 렌더링(DOM) 트리에 아예 존재하지 않는다.

 

v-if	아래와 반대 조건
v-show	사용자가 보였다, 안 보였다 자주 하게 만들 가능성이 높은 부분 (DOM 객체 트리에 생성했다 삭제했다 하는 부분은 비용이 많이 드는 부분)

v-show - DOM 트리에 생성은 하는데, style에 none을 넣어서 안 보이게 만든다.

 

 

v-if true로 만들면 DOM 객체 트리에 생성하는 것을 확인 가능하다.