vue.js Range v-for 와 v-for 템플릿 정보
기타 vue.js Range v-for 와 v-for 템플릿본문
Range v-for
v-for는 숫자를 사용할 수 있습니다. 이 경우 템플릿을 여러번 반복합니다.
<div>
<span v-for="n in 10">{{n}}</span>
</div>
v-for 템플릿
템플릿 v-if와 마찬가지로 , <template>태그를 사용해 여러 엘리먼트의 블럭을
렌더링 할 수 있습니다.
<ul>
<template v-for="item in items">
<li>{{item.msg}}</li>
<li class="divider"></li>
</template>
</ul>
v-for와 v-if
동일한 노드에 두가지 모두 있다면, v-for가 v-if보다 높은 우선순위를 갖습니다.
즉, v-if는 루프가 반복될 때마다 실행됩니다.
이는 _일부_항목만 렌더링 하려는 경우 유용합니다.
<li v-for="todo in todos" v-if="!todo.isComplete">
{{todo}}
</li>
위의 경우 완료되지 않은 할일만 렌더링합니다.
위 방법 대신 실행을 조건부로 하는 것이 목적이라면 래퍼 엘리먼트(또는 <template>)을 사용하세요
<ul v-if="todos.length">
<li v-for="todo in todos">
{{todo}}
</li>
</ul>
<p v-else>No todos left!</p>
추천
0
0
댓글 0개