Vue.js 입문 수업 04 - 조건부 랜더링 https://start-vue.js-web.app

1. Vue.js 입문
조건부 렌더링
( v-show, v-if & v-else & v-else-if )

2. 상황에 따라 다른 화면을 보여주고 싶다면?
EX> 로그인 상태에 따라…

3. <div id="loginBox">
<p>비로그인 상태 화면</p>
<button onclick="login();">로그인!</button>
</div>
<div id="logoutBox" style="display: none;">
<p>로그인 상태 화면</p>
<button onclick="logout();">로그아웃!</button>
</div>
<script>
var loginBox = document.getElementById('loginBox');
var logoutBox = document.getElementById('logoutBox');
function login(){
loginBox.style.display = 'none';
logoutBox.style.display = 'block';
};
function logout(){
loginBox.style.display = 'block';
logoutBox.style.display = 'none';
};
</script>

5. 복잡한 화면이라면…

6. <div id="loginBox"></div>
<script>
// 레이아웃을 변수로 정의
var loginLayout = '<p>비로그인 상태 화면</p>'
+ '<button onclick="toggleLogin();">로그인!</button>';
var logoutLayuot = '<p>로그인 상태 화면</p>'
+ '<button onclick="toggleLogin();">로그아웃!</button>';
var isLogin = false; // 인증 상태
var loginBox = document.getElementById('loginBox');
loginBox.innerHTML = loginLayout; // 초기 화면
function toggleLogin(){
isLogin = !isLogin;
loginBox.innerHTML = isLogin ? logoutLayuot : loginLayout;
}
</script>

7. 조건부 렌더링을 위한 디렉티브
v-if
v-show

8. v-show 디렉티브
CSS의 display 속성을 이용한 화면 표시 여부

9. v-show 디렉티브
CSS의 display 속성을 이용한 화면 표시 여부

10. v-show 사용 방법
<div v-show="속성값"> 내용 </div>
속성값은 ture나 false를 판별할 수 있는 값

11. <div id="app">
<div v-show='isLoginBoxShow'>
<p>비로그인 상태 화면</p>
<button onclick="login();">로그인!</button>
</div>
<div v-show='!isLoginBoxShow'>
<p>로그인 상태 화면</p>
<button onclick="logout();">로그아웃!</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: { isLoginBoxShow: true }
});
function login(){
app.isLoginBoxShow = false;
};
function logout(){
app.isLoginBoxShow = true;
};
</script>

14. v-if 디렉티브
속성값이 true인 경우만 DOM요소를 랜더링
= 진짜 조건부 렌더링

15. <div id="app">
<div v-if='isLoginBoxShow'>
<p>비로그인 상태 화면</p>
<button onclick="toggle();">로그인!</button>
</div>
<div v-else>
<p>로그인 상태 화면</p>
<button onclick="toggle();">로그아웃!</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: { isLoginBoxShow: true }
});
function toggle(){
app.isLoginBoxShow = !app.isLoginBoxShow;
};
</script>

16. 함께 사용할 수 있는 디렉티브
v-if & v-else & v-else-if

17. <div id="app">
<p>오늘은
<span v-if=' dayOfWeek==1 '>월요일! 원래 </span>
<span v-else-if=' dayOfWeek==2 '>화요일! 화가 나서 </span>
<span v-else-if=' dayOfWeek==3 '>수요일! 수없이 </span>
<span v-else-if=' dayOfWeek==4 '>목요일! 목아프게 </span>
<span v-else-if=' dayOfWeek==5 '>금요일! 금요일이라 </span>
<span v-else-if=' dayOfWeek==6 '>토요일! 토하도록 </span>
<span v-else>일욜일! 일단 </span>
마시는 날 ~
</p>
<button onclick="rand()">다른날은?</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: { dayOfWeek: (new Date()).getDay() }
});
function rand(){
app.dayOfWeek = Math.floor(Math.random()*7);
};
</script>