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

Posted 2023-02-23

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

【英文标题】：How can I conditionally render raw HTML with v-html inside a nested v-for loop in Vue.js?

【发布时间】：2018-09-08 00:47:23

【问题描述】：

我正在尝试在嵌套的 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

希望有人能帮忙。

【问题讨论】：

为什么不使用自定义指令？ vuejs.org/v2/guide/custom-directive.html#Intro

或者，您可以使用v-html="some_method(html)"，然后编写一个方法（在我的示例中为some_method），其中包含呈现html 的条件。

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

啊啊，当然.. 谢谢@JacobGoh 这很有意义..

【参考方案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

【讨论】：

谢谢@tony19。这样可行！比我预期的要简单。

@MortenVestergaard 没问题 :)