티스토리 뷰
1. 조건부 렌더링
조건부 렌더링은 렌더링하여 페이지에 보여줄 데이터를 변경할 때 사용하는 방식이다. HTML 코드에 속성으로 v-if, v-else-if, v-else를 선언해주면 된다. 그리고 속성에는 반드시 true 와 false로 떨어질 수 있도록 조건 식을 넣어야 한다.
- 조건부 렌더링 기본 구조
<p v-if=" 조건식 1"> 텍스트 </p>
<p v-else-if=" 조건식 2"> 텍스트 </p>
<p v-else=" 조건식 3" > 텍스트 </p>
조건식 판단을 하기 위해 vue.js에 해당 조건식을 참과 거짓으로 판단할 수 있게 값을 넣어야한다. 즉, 조건식에 선언된 변수가 인스턴스에 반드시 존재해야 하며 이 식이 true / false 판단 여부가 성립되어야 한다.
- 조건부 렌더링 예시
< HTML>
2 3 4 5 6 7 8 9 10 11 | <body> <h2>Vue.js Conditional Rendering</h2> <div id="instance"> <img v-bind:src="img" width="150px" height="150px"></img> <h3>{{ player }}</h3> <p v-if="a">James harden</p> <p v-else-if="b">Yannis Antetokounmbo</p> <p v-else-if="c">Luka Doncic</p> <p v-else-if="d">Trae Young</p> </div> | cs |
<Vue.js Instance>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> var app = new Vue({ el: '#instance', data () { return { img: 'https://kr.vuejs.org/images/logo.png', player : 'Who is the top scorer in NBA?', a : true, } } }) | cs |
<화면>
그리고 화면의 출력 여부만 판단하는 경우에는 v-show 기능을 사용하면 된다. v-show 역시 해당 속성에 조건식을 반드시 선언해야 하고, true면 해당 태그를 노출하게 되고. false면 그렇지 않게 된다.
- v-show 사용 예시
<HTML>
1 2 3 4 5 | <p v-show="a>40">James harden</p> <p v-show="b>40">Yannis Antetokounmbo</p> <p v-show="c>40">Luka Doncic</p> <p v-show="d>40">Trae Young</p> | cs |
<Vue.js Instance>
1 2 3 4 5 6 7 8 | return { img: 'https://kr.vuejs.org/images/logo.png', player : 'Are there any player scored more than average 40 point in the NBA?', a : 39.3, b : 31.1, c : 30.4, d : 27.7, } | cs |
<화면>
만약 인스턴스와 조건식의 숫자를 30으로 변경한다면 출력 값은 변경된다.
2. 리스트 렌더링
리스트 렌더링은 반복문 기능을 통해 리스트 형태의 데이터를 한줄의 코드로 완성하는 것을 의미한다. 만약 Vue 인스턴스가 아닌 경우에 HTML으로 리스트형 데이터를 선언하게 된다면 아래와 같은 코딩을 해야 한다.
<HTML>
1 2 3 4 5 6 7 8 | <h3>{{ player }}</h3> <ul> <li>Leborn James</li> <li>Luka Doncic</li> <li>Ricky Rubio</li> <li>Trae Young</li> <li>Ben Simmons</li> </ul> | cs |
이 방법을 리스트 렌더링을 사용하게 된다면 좀 더 쉬운 방법으로 구현할 수 있다.
<HTML>
1 | <li v-for="name in Dataset">{{ name }}</li> | cs |
<Vue.js Instance>
1 2 3 4 5 | return { img: 'https://kr.vuejs.org/images/logo.png', player : 'Who is the top 5 player the most assist in NBA?', Dataset : ["Leborn Jamse", "Luka Doncic", "Ricky Rubio", "Trae Young", "Ben Simmons"] } | cs |
v-for 속성을 통해 인스턴스와 DOM이 연결된다. 그리고 JavaScript의 for 문과 동일하게, 데이터 셋과 변수로 연결이 된다.
name (변수) in Dataset (데이터 셋)
Vue Instance는 JSON 기반으로 데이터를 선언하게 되므로 다음과 같이 변수를 선언하는 것도 가능하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>클라이언트 구축 4</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h2>Vue.js List Rendering</h2> <div id="instance"> <img v-bind:src="img" width="100px" height="100px"></img> <h3>{{ player }}</h3> <ul> <li v-for="player in Dataset">{{ player.name }} (Assist : {{ player.assist }})</li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#instance', data () { return { img: 'https://kr.vuejs.org/images/logo.png', player : 'Who is the top 5 player the most assist in NBA?', Dataset : [ { name : "Leborn Jamse" , assist : 10.8 }, { name : "Luka Doncic" , assist : 9.3 }, { name : "Ricky Rubio" , assist : 9.2 }, { name : "Trae Young" , assist : 8.6 }, { name : "Ben Simmons" , assist : 8.4 } ] } } }) </script> </body> </html> | cs |
리스트 렌더링은 HTML 태크의 리스트 보다 유지보수가 더욱 용이하게 되는 장점을 가질 뿐더러 MVVM 모델로 개발이 가능해진다.
3. 예시 홈페이지
조건부 렌더링과 리스트 렌더링을 활용한 웹 페이지를 만들어보자. NBA에서 득점 10위권 안에 들어가는 선수들에 대한 주요 스탯을 안내해주는 사이트를 제작해볼 것이다. 아래와 같은 방식으로 리스트 박스로 선수를 선택하게 되면 해당 선수의 스탯이 출력 되어야한다.
- 사이트 주요 기능
리스트 박스로 선수를 선택할 수 있다.
해당 선수에 대한 스탯 5가지를 노출 시켜야 한다.
이 사이트의 경우 크게 2가지 부분으로 나누어서 설계한다.
1) 리스트 박스
1-1) 리스트 박스로 데이터를 선택 해당 값을 받아서 이름 노출 (변수 명 : select)
<select v-model='select'>
</select>
<h4>{{ select }}</h4>
1-2) 리스트 박스는 리스트 렌더링 방식 활용
<option v-for="value in Dataset">{{ value.name }}</option>
2) 스탯 출력
2-1) 스탯을 리스트 렌더링을 활용하여 출력 시키기
<div v-for="player in Dataset"></div>
2-2) 변수들을 노출 시키기 위한 부분
<p v-show="player.name == select">Point : {{ player.point }} </div>
그리고 이에 맞도록 데이터를 Vue Instance에 설정해주면 웹 페이지가 완성된다.
<HTML>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>클라이언트 구축 4</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h2>NBA Top Stat Players</h2> <div id="instance"> <img v-bind:src="img" width="100px" height="100px"></img> <h2>{{ title }}</h2> <select v-model='select' size='4'> <option value=''>-- select --</option> <option v-for="value in Dataset">{{ value.name }}</option> </select> <h4>{{ select }}</h4> <div v-for="player in Dataset"> <p v-show="player.name == select">Point : {{ player.point }} <br> Assist : {{ player.assist }} <br> Rebound : {{ player.rebound }} <br> Steal : {{ player.steal }} <br> Block : {{ player.block }} </p> </div> </div> </body> </html> | cs |
<Vue Instance>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | var app = new Vue({ el: '#instance', data () { return { img: 'https://kr.vuejs.org/images/logo.png', title : 'NBA stats', select : '', Dataset : [ { name : "James Harden" , point : 39.3 , assist : 7.5 , rebound : 5.9 , steal : 2.0 , block : 0.7 }, { name : "Yannis Antetokounmbo" , point : 31.1 , assist : 5.4 , rebound : 13.1 , steal : 1.3 , block : 1.2 }, { name : "Luka Doncic" , point : 30.4, assist : 9.3 , rebound : 9.9 , steal : 2.0 , block : 0.1 }, { name : "Trae Young" , point : 27.7 , assist : 8.6 , rebound : 4.1 , steal : 1.2 , block : 0.1 }, { name : "Bradley Beal" , point : 27.4 , assist : 7.0 , rebound : 4.5 , steal : 0.9 , block : 0.3 }, { name : "Anthony Davis" , point : 27.4 , assist : 3.3 , rebound : 9.2 , steal : 1.5 , block : 2.6 }, { name : "Karl-Anthony Towns Jr." , point : 26.5 , assist : 4.4 , rebound : 11.7 , steal : 1.0 , block : 1.3 }, { name : "Damian Lillard" , point : 26.3 , assist : 7.5 , rebound : 4.4 , steal : 1.0 , block : 0.4 }, { name : "Leborn James" , point : 25.9 , assist : 7.1 , rebound : 7.1 , steal : 1.3 , block : 0.5 }, { name : "Kawhi Leonard" , point : 25.8 , assist : 5.1 , rebound : 7.9 , steal : 1.8 , block : 0.7 }, ] } }, }) | cs |
- 웹 페이지 주소
https://adrian0220.github.io/Webclient/NBAtopstats.html
'Skill > Programming - Server & Client' 카테고리의 다른 글
| 9.[Vue.js] 클래스, 스타일 바인딩 (0) | 2019.12.31 |
|---|---|
| 8.[Vue.js] 이벤트 핸들링 (0) | 2019.12.21 |
| 6.[Vue.js] method, computed, watch (0) | 2019.12.07 |
| 5. [Vue.js] 데이터 바인딩 응용 (0) | 2019.12.01 |
| 4. Vue.js 인스턴스, 데이터 바인딩 (0) | 2019.11.24 |