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