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

Question

我试图在嵌套的v-for循环中有条件地呈现HTML块。

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

因此，如果stringNumber === 0 （父v-for循环中的第一个呈现元素）并且在fretMark1数组中找到fretMark1编号，则将类'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 ，我想在stringNumber === 0和fretMark2.indexOf(fret) >= 0的元素上添加<div class="fret-mark-2"></div> 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。

这是小提琴的链接

我希望有人能帮帮忙。

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>

在这种情况下，仅当v-if条件的值为true才将div.fret-mark-2添加到DOM中。

更新的小提琴