v-for和v-if

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/qq_40713392/article/details/85926263

1.当它们处于同一个元素节点时，v-for的优先级高于v-if。因此，v-if将重复运行于每个v-for循环中。
使用场景：当你仅仅想为数据项中的某些项渲染节点时，这种优先级机制非常有用。
如下：只渲染3和4这两个数据的节点

<ul>
     <li v-for="num in numList" :key="num" v-if="num >= 3">{{num}}</li>
</ul>

export default {
  name: 'HelloWorld',
  data () {
    return {
      numList: [1, 2, 3, 4]
    }
  }
}

2.如果你想将v-if跳过循环的执行，则将v-if置于外层元素，如下：

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