[Vue #4] 조건부 렌더링

if

<div id="app">
  <button @click="toggle">Toggle!</button>
  <h1 v-if="isShow">1</h1>
  <h1 v-elseif="[]">2</h1>
  <h1 v-else>3</h1>
</div>

const App = {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
  },
};
const vm = Vue.createApp(App).mount("#app");

v-if를 통해 조건에 따라 요소의 조건부 렌더링이 가능하다. else if, else도 사용 가능하다.

v-if와 v-for는 분리해서 사용하자.

<ul>
  <li v-for="user in users" v-if="user.isAcitve" :key="user.id">
    {{user.name}}
  </li>
</ul>

동일 엘리먼트에 v-if와 v-for을 동시에 사용할 경우 v-if의 우선순위가 더 높기 때문에 문제가 발생한다.

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isAcitve">
      {{user.name}}
    </li>
  </template>
</ul>

위와 같이 단순히 반복하는 용도로 쓰이는 렌더링 되지 않는template 태그를 사용하여 문제를 해결할 수 있다.

show

if와 비슷하지만 style 속성이 기본적으로 들어가 있어 태그가 등록되어있다.

<div id="app">
  <button @click="toggle">Toggle!</button>
  <h1 v-show="isShow">1</h1>
</div>

따라서, 태그는 기본적으로 있고, style의 display속성을 통해 화면에 보여짐 여부를 결정한다.

if와 비교했을 때 초기 렌더링 비용이 높지만, 전환비용이 낮다.

문제점

하지만, 일단 참거짓 여부와 상관없이 일단 태그를 만들고 보기 때문에 이중중괄호 구문 사용 시, 데이터 바인딩 이전에 구문이 출력될 수 있다는 문제점이 있다.

해결책

v-cloak디렉티브를 같이 활용해야 한다.

<div id="app">
  <button @click="toggle">Toggle!</button>
  <h1 v-if="isShow" v-cloak>{{msg}}</h1>
</div>

<style>
  [v-cloak] {
  display: none;
  }
</style>

v-cloak 속성을 지닌 태그는 데이터 바인딩 이전에는 보이지 않았다가 바인딩이 되면 v-cloak속성을 제거하여 화면에 보여지도록 한다.

그래서 무엇을 사용?

일반적으로 우선 v-if를 사용하고, 전환비용이 높을 때는 v-show를 사용하면 된다.