19. the v-show directive

내용

v-show 지시문은 조건부 렌더링을 위한 솔루션으로, 요소를 화면에서 숨기기 위해 사용됩니다.
v-if와 달리 요소가 문서에서 제거되지 않고 display 속성이 none으로 설정되어 화면에서 숨겨집니다.
v-show는 독립적으로 사용되며, template 태그나 v-else와 함께 사용할 수 없습니다.
v-show를 사용하면 요소를 자주 토글할 때 초기 로드 시에는 성능 저하가 있을 수 있지만, 토글 시에는 비용이 적게 듭니다.
v-if 지시문은 조건에 따라 요소를 완전히 추가하거나 제거하며, template 태그 else if와 else를 지원합니다.
v-if는 게으른 특성을 가지고 있어 초기 페이지 로드 시 조건이 false로 평가되면 요소가 추가되지 않아 클라이언트 리소스를 절약할 수 있습니다.
그러나 v-if는 요소를 추가하거나 제거하는 데 비용이 많이 들 수 있으며, 토글 작업에 영향을 미칩니다.
v-show과 v-if 중 어떤 것을 사용할지는 요소의 자주 토글 여부에 따라 다릅니다.
자주 토글되는 경우 v-show가 유용하고, 드물게 토글되는 경우 v-if가 더 효율적일 수 있습니다.
조건부 렌더링에 대한 공식 문서 페이지에서 자세한 정보와 사용 사례를 확인할 수 있으며, 필요한 경우 참고할 수 있습니다.

index.html

<!DOCTYPE>
<html>

<head>
  <title>VueJS Course</title>
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
  <p v-if="mode === 1">Showing v-if directive content</p>
  <template v-else-if="mode === 2">
    <p>Bonus content</p>
    <h3>v-else-if</h3>
  </template>
  <p v-else>v-else</p>

  <i v-show="mode === 1">v-show</i>

  <select v-model.number="mode">
    <option value="1">v-if</option>
    <option value="2">v-else-if</option>
    <option value="3">v-else</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>

</html>

app.js

let vm = Vue.createApp({
  data() {
    return {
      mode: 1
    }
  }
}).mount('#app');

main.css

body{
  font-size: 20px;
  font-family: sans-serif;
}
select{
  display: block;
  margin-top: 15px;
  font-size: 20px;
}

# 19. the v-show directive

# 내용

19. the v-show directive

내용