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

Question

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

在嵌套的 v-for 中，我已经为每个元素绑定了一个满足特定条件的类。

所以如果stringNumber === 0（父v-for循环中的第一个渲染元素）并且在fretMark1数组中找到fret-number，则将类'fret-mark-1'添加到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