v-else中的代码未执行——v-if和v-for在同一结点使用

一、现象

      v-if和v-else中为结构类似的代码，当判断条件为true时，v-if中的代码正常执行，而当判断条件为false时，v-else中的代码却没有执行。代码如下：

二、原因

      我的v-if和v-else是和v-for一起使用的，此时，v-for的优先级是大于v-if和v-else的。相当于v-if重复运行于每个v-for循环中，v-else同理。所以节点未成功渲染到页面中。

三、解决方案

      考虑到v-if中的代码是正常执行的，于是将v-else也改写为v-if，即可成功显示，代码如下：

四、优化方案

      由产品bug的原因可知，v-if与v-for在同一节点使用时，v-if重复运行，会降低代码的执行效率，影响性能，所以应尽量避免v-if与v-for在同一节点使用，优化代码如下：