v-for 与 v-if 处于同一级别影响 v-else答案

【问题标题】：v-for on the same level with v-if affects v-elsev-for 与 v-if 处于同一级别影响 v-else
【发布时间】：2018-08-16 07:12:21
【问题描述】：

如果我这样做：

<ul>
<li v-for="value in testData">
  <span v-if="Array.isArray(value)" v-for="morevalue in value"> {‌{ morevalue }}</span>
  <span v-else> {‌{ value }} </span>
</li>
</ul>

v-else 中的 span 也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？

这是 Vue 实例：

new Vue({
    el: '#exercise',
    data: {
        testData: {
        name: 'TESTOBJECT', 
        id: 10,
        data: [1.67, 1.33, 0.98, 2.21]
        }
    }
});

【问题讨论】：

那是因为外面的v-for被封装在里面了。
嗯，你有两个 v-fors...

标签： vue.js vue-directives

【解决方案1】：

你可以试试这样的吗：

<div v-if="!!arr?.length">
  <ul>
    <li v-for="value in arr">

      // ...

    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

v-for 的优先级高于v-if，（即）每个循环都会执行v-if。如果您想跳过基于v-if 的v-for 的执行。我建议将循环嵌套在条件中。

<ul>
<li v-for="value in testData">
  <template v-if="Array.isArray(value)"> 
    <span v-for="morevalue in value"> {‌{ morevalue }} ></span>
  </template>
  <span v-else> {‌{ value }} </span>
</li>
</ul>

【讨论】：