[ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩

지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 데이터 바인딩

[ITSkeleton][vue.js] 데이터 바인딩

지난글에 이어서 이번에는 v-for를 이용하여 열거 하는 방법을 한번 알아보려합니다.

 

쉽게 얘기해서 열거는 빠르게 HTML을 작성하도록 도움을 줍니다

 

아래와 같은 HTML 코드가 있습니다

<div id="app">
  <ul>
    <li>Hello1</li>
    <li>Hello2</li>
    <li>Hello3</li>
    <li>Hello4</li>
  </ul>
</div>

리스트를 만들기위해 Hello1, Hello2, Hello3, Hello4 이렇게 작성이 되었습니다.

 

만약 10까지 만들려고하면 10개를 복사 붙여넣기 해야하겠죠?

 

그리고 코드의 길이또한 상당히 길어지게 될겁니다.

 

물론 저렇게 하드코딩을 해도 되지만 좀더 편하게 사용하고 보기 좋게 만들기위해 아래와 같이 열거를 이용하여 코드를 작성할 수 있습니다

<div id="app">
  <ul>
    <li v-for="n in 10">Hello{{ n }}</li>
  </ul>
</div>

이렇게 사용할 수 있습니다

결과

** v-for="n in 10" -> 해당 문법을 열거라고 읽습니다.

 

위는 숫자를 이용한 열거였다면 아래는 배열을 이용한 열거입니다

<div id="app">
  <ul>
    <li v-for="n in [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]">Hello{{ n }}</li>
  </ul>
</div>

이렇게 배열을 열거했다고 생각해봅시다.

 

동일하게 10까지 숫자가 나타나게 되지만 HTML에는 리터럴 배열을 사용할 수 없습니다. (리터럴: 소스 코드의 고정된 값을 대표하는 용어)

 

배열을 할당하는 변수를 이용하는 것이 좋은 방법입니다.

<div id="app">
  <ul>
    <li v-for="n in count">Hello{{ n }}</li>
  </ul>
</div>

new Vue({
    el: '#app',
    data: {
      count: [10,9,8,7,6,5,4,3,2,1],
    }
})

이렇게 바인딩을 이용하여 변수를 할당해 줍니다

 

배열이 저렇게 숫자가 아니라 문자가 된다면 어떨까요?

<div id="app">
  <ul>
    <li v-for="data in arrayData">{{ data }}</li>
  </ul>
</div>

new Vue({
    el: '#app',
    data: {
      arrayData: ['a','b','c','d','e','f','g'],
    }
})

이렇게 바인딩을 시킬수 있겠죠? 위 코드의 결과는

이렇게 나오게 될것입니다.

 

여기서 해당 배열의 index(인덱스)를 이용하여 다른 배열의 값을 가져오고 싶다면 어떻게 하면 될까요?

<div id="app">
  <ul>
    <li v-for="(data, index) in arrayData">{{ data }} => {{ another[index] }}</li>
  </ul>
</div>

new Vue({
    el: '#app',
    data: {
      arrayData: ['a','b','c','d'],
      another: ['A','B','C','D'],
    }
})

이렇게 사용할 수 있습니다. 

 

객체 또한 열거가 가능합니다

<div id="app">
  <ul>
    <li v-for="(value, name) in objectData">{{ name }} => {{ value }}</li>
  </ul>
</div>

new Vue({
    el: '#app',
    data: {
      objectData: {
      	a: 'A', b: 'B', c: 'C', d: 'D'
      }
    }
})

결과는 바로 위의 결과와 같은 결과를 가지도록 짜놓았습니다. 이렇게 객체를 또한 열거가 가능합니다.

 

변수를 설정하고 바인딩하고 사용한다! 여기까지 따라오셧다면 어느정도 이해를 하셨을거라 생각합니다.

 

다음은 클릭 및 키입력을 받는 이벤트에 대하여 알아보도록 하겠습니다!

 

다음글: [ITSkeleton][vue.js] 클릭 및 키 입력 이벤트 (click)