v-if 与v-for使用时候的注意点

一、了解

1. v-for和v-if可以同时使用，但不建议直接使用，如果想要使用有两种解决方案
2. 在div外层使用v-if 内层使用v-for
3. 在div外层使用v-for内层使用v-if
4. v-if控制元素的创建与移除，v-for，注意key属性书写

二、 例子

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

<ul>
    <template  v-if="flag">
       <li v-for="item in newList" > {{ item }} </li>
    </template>
</ul>