Nuxt js 에서 v-for문과 v-if문을 사용 하는 방법을 알아보자.
(Vue.js와 동일 하다) 자매품으로 v-show 키워드와의 차이점도 설명 한다.
우선 for문을 사용 하는법이다.
예제용으로 컴포넌트를 하나 만들자.
만약 프로젝트 만드는 법을 잘 모르겠다면 이전 포스트를 참고 하자.
소스코드
<template>
<div>
Hello World!
</div>
</template>
<script>
export default {
}
</script>결과물을 브라우저로 확인시 다음과 같이 헬로월드가 표시 된다.
다음으로 멤버변수에 해당하는 곳, data 화살표 함수에 임의의 배열 arr 을 선언 해주자.
<script>
export default {
data:() => ({
arr: [
'사과',
'바나나',
'참외',
'수박',
]
})
}
</script>임의의 텍스트들을 json 형태로 선언 하자.
여기서는 과일이름으로 사과, 바나나, 참외, 수박을 넣어 보았다.
다 된거나 다름 없다. 이제 이를 표시 하기 위해서 템플릿을 안에 {{ arr }} 형태로 적어보자. 아래와 같이 잘 표시 될 것이다.
<template>
<div>
Hello World!
{{ arr }}
</div>
</template>
배열이 텍스트로 그대로 표시 된다.
이제 반복문으로 돌리기 위해서 <div>를 하나 추가 하고 v-for 키워드를 사용 해보자. key attribute를 선언 하는 것을 잊지 말자. (인덱스값이 되는 i는 생략 가능하며 이 경우에는 오브젝트 내의 값을 이용해서 key를 지정 해야 한다.)
소스코드는 아래와 같다.
<template>
<div>
<div>Hello World!</div>
<div v-for="(item, i) in arr" :key="i">
{{ item }}
</div>
</div>
</template>결과물
<div> 라서 티가 별로 안난다. <ul>과 <li>로 변경 해보자.
<template>
<div>
<div>Hello World!</div>
<ul>
<li v-for="(item, i) in arr" :key="i">
{{ item }}
</li>
</ul>
</div>
</template>결과
다음은 if문이다.
위 for문의 예제를 표시/비표시 하는 식으로 만들어 보겠다.
show 플래그를 data내에 추가 해준다.
<script>
export default {
data:() => ({
arr: [
'사과',
'바나나',
'참외',
'수박',
],
show: true,
})
}
</script>
<button>버튼태그를 하나 추가 하고 텍스트는 '배열표시' 라고 적어주자.
@click 이벤트를 잡아서 show 플래그를 !느낌표로 변경 해주자.
<template>
<div>
<div>Hello World!</div>
<button @click="show = !show">배열표시</button>
<ul>
<li v-for="(item, i) in arr" :key="i">
{{ item }}
</li>
</ul>
</div>
</template><li>태그를 화려하게 감싸고 있는 <ul> 엘레멘트에 v-if 를 걸어서 show값이 true 일때만 배열이 표시 되도록 하면된다.
전체코드
<template>
<div>
<div>Hello World!</div>
<button @click="show = !show">배열표시</button>
<ul v-if="show">
<li v-for="(item, i) in arr" :key="i">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data:() => ({
arr: [
'사과',
'바나나',
'참외',
'수박',
],
show: true,
})
}
</script>실행 결과
해당 예제 코드에서 v-if 키워드는 v-show 로 대체 가능 하며 차이점은 DOM트리 상에서 해당 엘레멘트를 추가/삭제 하느냐 단지 안보이게 하느냐 차이다. 퍼포먼스를 아끼고 싶다면 show를 쓰는 것이 유리할 수 있다.
