딩코딩 : Computer Science 블로그

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

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

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

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

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

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

<template>
  <div>
    <h1>Hello Vue!</h1>
    <h2 class="line-through">line-through</h2>
    <h2 v-bind:class="textDecroation" class="text-red">line-through</h2>
    <h2 :class="isDone === true ? 'line-through' : 'highlight'">
      line-through
    </h2>

    <h2
      :class="{
        highlight: isDone === false,
        'text-red': username === 'scalper',
      }"
    >
      Object형태의 동적 클래스
    </h2>

    <h2
      :class="[
        isDone === true ? 'line-through' : 'highlight',
        username === 'scalper' ? 'text-red' : 'text-green',
      ]"
    >
      Array 형태의 동적 클래스 부여
    </h2>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scaalper",
      isDone: true,
      textDecroation: "line-through",
    };
  },
};
</script>

<style>
.text-red {
  color: red;
}

.text-green {
  color: green;
}

.highlight {
  font-weight: bold;
  background: pink;
}

.line-through {
  text-decoration: line-through;
}
</style>