conditional rendering이란?
특정한 조건에 따라서 뷰를 다르게 보여주는것을 conditional 렌더링이라고 한다. 자바스크립트에서 conditional rendering과 관련된 문법은 if, else 혹은 switch, case 혹은 삼항 연산자 등이 있겠다.
Vue에서는 View에서 conditional rendering을 가능하게 해주는 다양한 템플릿 문법들이 제공된다.
template syntax 문법 : v-if and v-else
조건에 따라서 뷰를 다르게 보이고 싶으면 어떻게 해야 하나? 이것을 해결해주기위한 template syntax 문법이 conditional rendering 이다.
재고유무에 따라서 재고 있음 혹은 재고 없음을 보여주는 뷰를 작성해보자.
|
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#app', data: { product: 'Socks', image: './assets/socks-green.jpg', inStock: true } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="app"> <div class="product"> <div class="product-image"> <img :src="image"> </div> <div class="product-info"> <h1>{{product}}</h1> <p v-if="inStock">In Stock</p> <p v-else="">Out of Stock</p> </div> </div> </div> |
v-else-if
조건을 3가지로 나눈다. 재고량이 10보다 많으면 in stock 10보다 작고 0보다 크면 almost out stock 0 이면 out of stock
inventory로 바꾼다음 실행하고 vue 디버그창에서 inventory 숫자를 조정해서 화면에 나타나는것을 확인한다.
혹은 콘솔창에서 app.inventory = 5 이렇게 입력해서 확인하는 것도 가능하다.
|
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#app', data: { product: 'Socks', image: './assets/socks-green.jpg', inventory: 100 } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="app"> <div class="product"> <div class="product-image"> <img :src="image"> </div> <div class="product-info"> <h1>{{product}}</h1> <p v-if="inventory > 10">In Stock</p> <p v-else-if="inventory <= 10 && inventory > 0">almost sold out!!</p> <p v-else="">Out of Stock</p> </div> </div> </div> |
+ todo
Vue 인스턴스 data에 onSale 키를 추가한다. 그리고 onSale이 true이면 div 태그 맨 마지막에 span 태그를 추가하고 조건 렌더링으로 onSale이 true이면 onSale이라고 표시하도록 하자.
See the Pen
Challenge 3 – Intro to Vue by Gregg Pollack (@GreggPollack)
on CodePen.