딩코딩 : Computer Science 블로그

<template>
  <div>
    <!-- v-once -->
    <!-- <h1>Hello {{ user.name }}</h1> -->
    <!-- <h1 v-once v-text="user.name"></h1>
    <h1 v-text="user.name"></h1>
    <input type="text" v-model="user.name" /> -->

    <!-- if / else -->
    <!-- <h1 v-if="showname">My name is {{ user.name }}</h1>
    <h2 v-else>이름을 보여줄 수 없습니다.</h2>
    <h2 v-if="user.age > 20">당신은 성인입니다.</h2>
    <h2 v-else-if="user.age > 14 && user.age < 20">당신은 청소년 입니다.</h2>
    <h2 v-else>당신은 어린이 입니다.</h2> -->

    <h2 v-if="!showName">{{ user.name }} IF</h2>
    <h2 v-show="!showName">{{ user.name }} Show</h2>

    <ul>
      <template v-if="question === 'frontend'">
        <li>HTML은 재미있나요?</li>
        <li>CSS은 재미있나요?</li>
        <li>Javascript은 재미있나요?</li>
      </template>
      <template v-else>
        <li>Java은 재미있나요?</li>
        <li>Python은 재미있나요?</li>
        <li>C#은 재미있나요?</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      question: "frontend",
      showName: true,
      user: {
        name: "scalper",
        age: 12,
        job: "programmer",
      },
    };
  },
};
</script>

<style></style>

<h2 v-if="!showName">{{ user.name }} IF</h2>
<h2 v-show="!showName">{{ user.name }} Show</h2>

v-if는 해당 명령을 실행할 때마다 보여줄 값을 렌더링하는 반면

v-show는 최초에 한번만 렌더링하고 보여주는 여부만 바뀐다.

만약 보여주어야 하는 양이 방대하고 크기가 클 경우에

v-if는 보여줄 때마다 렌더링을 해야하지만,

v-show를 이용하면 한 번만 렌더링하기 때문에 유리하다.