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>