如何在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中。

更新的小提琴