18. conditional rendering

내용

  • 조건부 렌더링: Vue에서 조건에 따라 요소를 문서에 추가하거나 제거하는 기능입니다. 조건이 참일 때 요소가 페이지에 추가되고, 그렇지 않으면 제거됩니다.
  • 스타일과 클래스 바인딩: 이전에는 클래스와 스타일을 요소에 바인딩하여 요소를 숨기는 방법을 배웠습니다. 이는 display 또는 visibility 속성을 통해 구현될 수 있지만 Vue에서는 다른 솔루션이 제공됩니다.
  • 스타터 파일 사용: 강의에 제공된 스타터 파일을 다운로드하여 사용합니다.
  • v-if 디렉티브 사용: 특정 조건이 충족될 때 요소를 렌더링하기 위해 v-if 디렉티브를 사용합니다. mode 데이터 속성을 사용하여 조건부 렌더링을 구현합니다.
  • v-else-if 및 v-else 디렉티브: v-if 다음에 사용되는 v-else-if와 v-else 디렉티브를 통해 추가 조건을 설정할 수 있습니다.
  • 드롭다운을 통한 모드 변경: 드롭다운을 사용하여 mode 속성을 변경하고, 해당 모드에 따라 다른 요소를 렌더링합니다.
  • template 태그 사용: template 태그를 사용하여 여러 요소를 조건부로 렌더링할 수 있으며, 이 태그 자체는 렌더링되지 않습니다.
  • 조건부 렌더링의 다양한 접근 방법: v-if, v-else-if, v-else 디렉티브는 조건부 렌더링에 효과적인 도구입니다. 다음 강의에서는 조건부 렌더링의 대안적인 해결책을 살펴볼 예정입니다.

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>
  </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>

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>
    <p v-else-if="mode === 2">v-else-if</p>
    <p v-else>v-else</p>

    <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>

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>

    <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>