Vue.js 데이터바인딩 반복문

Vue.js는 데이터바인딩을 간편하게 해주는 JavaScript 프레임워크입니다. 데이터바인딩을 통해 화면에 데이터를 동적으로 표시할 수 있습니다. Vue.js에서 데이터를 반복적으로 출력하기 위한 반복문을 사용할 수 있습니다. 이 글에서는 Vue.js의 데이터바인딩 반복문에 대해 알아보겠습니다.

v-for 디렉티브

v-for 디렉티브는 Vue.js에서 배열이나 객체의 각 항목을 반복적으로 출력하기 위해 사용됩니다. 다음은 v-for 디렉티브를 사용한 예제 코드입니다.

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

			<script>
			  new Vue({
			    el: '#app',
			    data: {
			      items: ['Apple', 'Banana', 'Orange']
			    }
			  });
			</script>
		
	

위의 예제 코드에서는 v-for 디렉티브를 사용하여 items 배열의 각 항목을 반복적으로 출력하고 있습니다. 이를 적용한 화면은 다음과 같이 출력됩니다.

• Apple
• Banana
• Orange

객체를 반복문으로 출력하기

Vue.js에서 객체를 반복문으로 출력할 수도 있습니다. 다음은 객체를 반복문으로 출력하는 예제 코드입니다.

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

			<script>
			  new Vue({
			    el: '#app',
			    data: {
			      object: {
			        name: 'John',
			        age: 30,
			        job: 'Developer'
			      }
			    }
			  });
			</script>
		
	

위의 예제 코드에서는 객체를 반복문으로 출력하여 key와 value를 함께 표시하고 있습니다. 이를 적용한 화면은 다음과 같이 출력됩니다.

• name: John
• age: 30
• job: Developer

Vue.js의 데이터바인딩 반복문을 사용하면 배열이나 객체의 각 항목을 반복적으로 출력할 수 있습니다. 이를 통해 동적으로 변화하는 데이터를 손쉽게 화면에 표시할 수 있습니다.