为什么 v-if 和 v-for 不能在一起使用

原因：

因为两者的优先级不一样，v-for 的优先级比 v-if 高，如果一起使用，每次渲染时都会先循环再进行条件判断，先循环再做判断会造成性能浪费，使用过程中不要把它们放在同一个元素上。

解决方法：

1.将v-if放在外层嵌套?template（页面渲染不生成dom节点），在这一层先进行?v-if?判断，然后在内部进行v-for循环。

<template v-if="isShow">
 
  <p v-for="item in list">
 
</template>

2.如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项。

 computed: {
 
   items: function() {
 
     return this.list.filter(item => 筛选条件)
 
   }
 
 }