-
2. 리스트랜더링과 조건부랜더링Vue For Beginner 2019. 9. 29. 21:23
빌트인 디랙티브 (리스트, 조건부 랜더링)
- vue에서 간단한 리스트를 출력하는 방법이 정의되어있습니다. (v-for)
- 라디오박스 클릭 시 각각 다른 리스트 목록이 보여지는 기능으로 조건부 랜더링을 설명하고있습니다. (v-show, v-if)
리스트 랜더랑
vue는 데이터가 배열일 경우 리스트형태로 랜더링 할 수 있는 기능을 제공합니다. 이때 사용되는 문법이
v-for라는 빌트인 디렉티브 입니다. 사용법은 다음과 같습니다.<li v-for="(item, index) in items" :key="index"> {{index}} {{ item }}</li>위에서 item에는 배열의 각각의 항목이 오고 index에는 배열의 인덱스가 옵니다.
:key는 필수로 입력되는 항목은 아니지만 각 항목의 key값을 입력하도록 권장합니다. 아래는 채소와 과일의 리스트를 각각 출력하는 코드입니다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>리스트/조건</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="app"> <h3>과일 리스트</h3> <ul> <li v-for="(fruit, index) in fruits" :key="fruit">{{index + 1}}. {{fruit}}</li> </ul> <h3>채소 리스트</h3> <ul> <li v-for="(vegetable, index) in vegetables" :key="vegetable">{{index + 1}}. {{vegetable}}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { fruits: ['사과', '배', '귤', '멜론'], vegetables: ['양배추', '토마토', '당근', '양파'] } }) </script> </body> </html>위의 경우 각각의 데이터 항목이 고유값이기 때문에 item값을 직접 key값으로 정의하였고 실무에서는 객체의 리스트 형태가 오고 각 항목의 고유값이 담겨있기 때문에 이를 key값으로 정의할 수 있습니다.
데이터가 배열이 아닌 객체인 경우도 반복이 가능합니다.
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </div>이 경우에 v-for은 value, key, index값을 받으며 객체의 경우 순서가 보장되지 않기 때문에 실제 잘 활용되지는 않습니다.
조건부 랜더링
조건부랜더링은 데이터의 값이 true / false 인지에 따라 보여줄지 말지를 결정하는 기능입니다. 이 경우
v-if또는v-show빌트인디렉티브를 활용합니다. v-if는 조건이 참일때 까지 랜더링되지 않고 v-show은 조건의 유무에 상관없이 모두 랜더링되고 CSS기반으로 보여줄지 말지를 결정합니다. 따라서 상태값이 매우 자주 바뀐다면v-show, 그렇지 않다면v-if를 사용합니다.아래는 위에 예제에 라디오 박스버튼을 추가하였고 라디오박스 상태에 따라 각각의 리스트를 보여주도록 추가한 내용입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>리스트/조건</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="app"> <input type="radio" id="fruit" value="fruit" v-model="picked"> <label for="fruit">fruit</label> <input type="radio" id="vegetable" value="vegetable" v-model="picked"> <label for="vegetable">vegetable</label> <div v-if="picked === 'fruit'"> <h3>과일 리스트</h3> <ul> <li v-for="(fruit, index) in fruits" :key="fruit">{{index + 1}}. {{fruit}}</li> </ul> </div> <div v-if="picked === 'vegetable'"> <h3>채소 리스트</h3> <ul> <li v-for="(vegetable, index) in vegetables">{{index + 1}}. {{vegetable}}</li> </ul> </div> </div> <script> var app = new Vue({ el: '#app', data: { fruits: ['사과', '배', '귤', '멜론'], vegetables: ['양배추', '토마토', '당근', '양파'], picked: 'fruit' } }) </script> </body> </html>문법은 단순합니다. v-if 다음에 true 또는 false값이 오는 데이터를 바인딩해주면 됩니다.
v-model은 vue에서 폼을 처리할때 양방향으로 데이터를 참조할 수 있도록 도와주는 디렉티브입니다. if를 사용할지 show를 사용할지는 상황에 맞추어 사용하면 되고, v-if의 경우 else-if와 else형태로 사용할 수 있습니다.'Vue For Beginner' 카테고리의 다른 글
6. 폼(form) 다루기 (v-model) (0) 2019.10.03 5. 컴퍼넌트와 데이터 전달 (component, props, $emit) (0) 2019.10.01 4. 컴퍼넌트의 이해와 vue-cli으로 프로젝트 생성 (0) 2019.09.29 3. 이벤트 핸들링 (0) 2019.09.29 1. Vue의 기본속성 이해 (data, computed, watch) (0) 2019.09.29 댓글