Question

我试图在嵌套的v-for循环中有条件地渲染一大块HTML。

在嵌套的v-for I中，我已经将一个类绑定到每个元素，这满足了某个条件。

所以如果'fret-mark-1'（父v-for循环中的第一个渲染元素）并且在stringNumber === 0数组中找到了fret-number，则将类fretMark1添加到div中：fretMark1.indexOf(fret) >= 0

<div class="fretboard">
    <div v-for="(string, stringNumber) in numberOfStrings" class="string" v-bind:class="'string' + stringNumber">
      <div v-for="fret in numberOfFrets" class="note" v-bind:class="{ 'fret-mark-1': stringNumber === 0 && fretMark1.indexOf(fret) >= 0 ? true : false}" v-bind:data-note="generateNoteString(instrumentTuningPresets[selectedInstrument][stringNumber] + (fret - 1), showFlats)"></div>
    </div>
  </div>
</div>

这很好用，但是当我想根据另一个条件在嵌套元素中添加div时，它就成了问题。

我在Vue实例上存储了另一个名为fretMark2的数组，我想将<div class="fret-mark-2"></div>添加到stringNumber === 0和fretMark2.indexOf(fret) >= 0

的元素中

这样的话，如果有可能的话：

<div v-if="stringNumber === 0 && fretMark2.indexOf(fret) >= 0 ? true : false">{{ <div class="fret-mark-2"></div> }}</div>

但是当然在Vue2中我们不能用插值渲染原始HTML - 我们必须使用v-html。我只是无法根据v-for循环中的条件弄清楚如何使用v-html。

Here is a link to the fiddle

我希望有人可以提供帮助。

Answer 1

这样的话，如果有可能的话：
<div v-if="stringNumber === 0 && fretMark2.indexOf(fret) >= 0 ? true : false">{{ <div class="fret-mark-2"></div> }}</div>
但是当然在Vue2中我们无法使用插值渲染原始HTML - 我们必须使用v-html。

您实际上不需要使用字符串插值或v-html。您只需将v-if添加到条件<div>：

即可

<div v-for="fret in numberOfFrets" ...>
  <div v-if="stringNumber === 0 && fretMark2.indexOf(fret) >= 0"
       class="fret-mark-2">
  </div>
</div>

在这种情况下，div.fret-mark-2仅在v-if条件评估为true时才会添加到DOM中。

updated fiddle

如何在Vue.js中的嵌套v-for循环内有条件地使用v-html呈现原始HTML？

1 个答案: