Question

如果我这样做：

<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中的跨度也将在第二个V-FOR上循环，即使它没有任何v-for，为什么？

这是Vue实例：

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

Answer 1

v-for的优先级高于v-if，（即）v-if将针对每个循环执行。如果您想基于v-for跳过v-if的执行。我建议在这种情况下嵌套循环。

<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>

Answer 2

您可以尝试这样的事情吗？

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

      // ...

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

v-for与v-if在同一级别上影响v-else

2 个答案: