vue v-for combined with v-if

When they are on the same node, v-for the priority ratio is  v-if higher, which means that  v-if each  v-for cycle will be repeated separately. This priority mechanism can be useful when you want to render nodes for only a few items, as follows:

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ everything }}
</li>

The above code only passes unfinished todos.

And if your purpose is to conditionally skip the execution of the loop, you can put it  v-if on the outer element (or  <template>). Such as:

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ everything }}
  </li>
</ul>
<p v-else>No todos left!</p>