Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
조건부 렌더링
조건부 렌더링에서는 v-if, v-else-if, v-else, v-show 속성에 대해 알면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
</head>
<body>
<div id="app">
<div v-show="human">사람일 때만 보여집니다.</div>
<div v-if="human">저는 사람입니다.</div>
<div v-else-if="robot">저는 로봇입니다.</div>
<div v-else="human">저는 사람이 아닙니다.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
human: true,
robot: false,
},
});
</script>
</body>
</html>위 소스에서 human과 robot 속성값을 고치다보면 원리를 알게 된다.
추가적으로, v-if 내부에는 간단한 boolean 연산 등도 넣을 수 있다.
<div v-if="age > 10">나이가 10살 초과입니다.</div>
그래서 위와 같은 코드도 가능하다
풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.