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

因为vue的官网有明确的说明：v-for的优先级比v-if高，先循环再做判断会造成性能浪费，使用过程中不要把它们放在同一个元素上。

其次它们的作用也不同：

v-if的本质其实是动态的创建或者删除元素节点，只有当条件满足为true时才会创建节点。

v-for是遍历数组进行数据渲染，并且建议一定要设置key值，有id把id设为key值，没有id再把index设为key值

key值的作用：

这里key值的主要作用是给元素添加一个唯一的标识符，用于提高vue渲染性能；当data发生变化的时候，vue会使用diff算法来对比新旧虚拟DOM，如果key值相同才会考虑复用元素，如果key值不同，则会强制更新元素；一般通过把元素key值设置为id，来保证vue在更新数据的时候可以最大限度复用相同key值的元素
Q：为什么key值不能用下标？

因为数组的长度发生变化的时候，其他的元素下标会受到影响；如果把下标作为key值，由于其他的元素下标变化，vue会认为你的key值也变化了，就会更新元素，影响性能

解决方案:

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

<template v-if="isShow">

  <p v-for="item in list">

</template>

2.如果判断条件出现在循环内部，把需要v-for的值先在computed计算属性中过滤一次

 computed: {

    items: function() {

      return this.list.filter(item => 筛选条件)

    }

  }

3. v-if和v-for分开使用

---

详细内容可直接查看Vue官网的条件渲染部分:

条件渲染 — Vue.js