vue v-if 和 v-for一起的注意

在vue里面  有时候会经常混用一些指令  v-if 和 v-for

 

它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

 

正确的做法就是：在外新包装一层 <template> 再在其上使用 v-for

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

 

 

后来烟雨皆散尽，无人撑伞一人行