[vue] 공부하기 리스트 렌더링

1. 렌더링

• 리스트 렌더링 (v- for 사용하기)

일반적으로 사용하는 방법

data(){
	return{
		parentMessage : 'Parent',
		items : [{message : 'Foo'},{message : 'Bar'}]
	}
}

<li v-for="(item, index in items)">
	{{parentMessage}} - {{index}} - {{item.message}}
</li>

위와 같이 사용하는 것도 가능하며

<li v-for="{message} in items">
	{{message}}
</li>

<li v-for="({message}, index) in items">
	{{message}} {{index}}
</li>

이와 같이 사용하는 것도 가능하다. 자바스크립트의 forEach 구문과 비슷하다고 생각하면된다.

그리고 객체에 v-for를 사용하는 방법도 알아보자

data(){
	return {
		myObject : {
			title: 'Vue에서 목록을 작성하는 방법',
			autor : '홍길동',
			publishedAt : '2016-04-10'
		}
	}
}

<ul>
	<li v-for="value in Object">
		{{title}}
	</li>
</ul>

이는  value 값을 추출할 때 사용한다.

<ul>
	<li v-for="(value, key, index) in Object">
		{{index}}.{{key}}{{value}}
	</li>
</ul>

이러면 인덱스와 key 그리고 value 모두 알 수 있게 된다

<span v-for="n in 10">{{n}}</span>
// 여기서의 n은 0이 아니라 1부터 시작한다

• v-if 에 v-for 사용

  <li v-for v-for="todo in todos" v-if="!todo.isComplete">
  	{{todo.name}}
  </li>
  // 이렇게 쓰면 에러가 난다
  
  <template v-for="todo in todos">
  	<li v-if="todo.isComplete">
  		{{todo.name}}
  	</li>
  </template>
  

• 같이 사용하는 것은 권장되지 않는다고 한다
• 컴포넌트에 v-for 사용

<MyComponent v-for="item in iitems" :key="item.id"/>

컴포넌트에 v-for를 직접 사용해주는 것이 가능하다

<MyComponent 
	v-for="(item, index) in items"
	:item="item"
	:index="index"
	:key="item.id"
/>