[Vue.js] 뷰(Vue) 디렉티브 v-for 알아보기

뷰(Vue) 디렉티브 v-for

 

Thumbnail

 

 

v-for

 

 

"데이터의 반복을 처리해주는 디렉티브"

 

 

 

 

사용예시

<div id="app"> <!-- html -->
      <span v-for="n in num">{{n}}</span>
</div>

	var App = new Vue({  /* JavaScript */
        el : "#app",
        data : {
            num : [1,2,3,4,5,6,7,8,9]
        }
    })

결과

1 2 3 4 5 6 7 8 9

 

 

조금 난이도를 높여서 v-for와 v-if를 사용하여 데이터를 바인딩 해보겠습니다.

 

  <h1>v-for</h1>   <!-- html  -->
     <div id="app">
          <table>
           <tr>
               <th>이름</th>
               <th>나이</th>
           </tr>
            <tr v-for="x in people" v-if="x.age > 23">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
            </tr>
        </table>
    </div>

  var App = new Vue({   /* javascript */
        el : "#app",
        data : {
            people : [{
                name : '김소혜',
                age : 21
                },
                {
                name : '진세연',
                age : 26                   
                 },
                {
                name : '이채영',
                age : 20
                 },
                 {
                 name : '손나은',
                 age: 26
                 },
                 {
                 name : '이다빈',
                 age: 24
                 }]
        }
    })

 

 

v-for="x in people" : people의 모든 값을 반복해서 출력

 

v-if="x.age > 23" : 나이가 23 초과인 people의 데이터만 바인딩

 

 

 

See the Pen [Vue.js] 뷰(Vue) 디렉티브 v-for by junheeleeme (@junheeleeme) on CodePen.

 

 

 

HTML태그안에 필터링을 껴주는 듯한 느낌이라 새롭다.

 

 

<tr v-for="(x, idx) in info" v-if="idx == 3">
	<td v-text="x.name"></td>
</tr>
//index값도 활용 가능하다.