Vue Rendering 학습정리

v-if : 조건부 랜더링

<h3 v-if='a2 == 100'>a2는 100입니다</h3>
<h3 v-else>a2는 100이 아닙니다</h3>

template 태그에서도 사용이 가능하다 (v-show 는 불가)

<template v-if='a6 == 100'>
	<h3>data1</h3>
	<input type='text' key='data1'/>
</template>
<template v-else>
	<h3>data2</h3>
	<input type='text' key='data2'/>
</template>

v-show

조건부 랜더링 인데 태그는 표시하고 display 속성으로 처리한다

<h3 v-show='a7 == 100'>a7은 100입니다</h3>
<h3 v-show='a7 != 100'>a7은 100이 아닙니다</h3>

v-if 와 다른 점은 태그가 전부 적용된다 display:none 속성으로 관리된다

template 태그로 사용 못 한다

v-for

반복 랜더링

<ul>
	<li v-for='(a1, idx) in array1'>
		{{idx}} : {{a1}}
	</li>
</ul>

Uploaded by N2T