vue3的v-for 与 v-if
当他们同时存在时,v-if的优先级更高,所以v-for就不会渲染上
<!--
这会抛出一个错误,因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
这里就会报错,因为v-for没有起作用
解决方法:在外先包装一层 <template>
再在其上使用 v-for
可以解决这个问题
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>