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

嘿，我懂你要在嵌套v-for循环里实现满足双条件的类绑定，同时还要条件渲染特定HTML内容，这事儿咱们一步步来搞定：

首先，先把你没写完的代码补全并优化，核心是用Vue的动态类绑定和条件渲染指令来实现需求：

完整模板代码示例 #

<div class="fretboard">
  <!-- 父级循环：遍历琴弦 -->
  <div 
    v-for="(string, stringNumber) in numberOfStrings" 
    :key="stringNumber"
    class="string"
    <!-- 如果你有父级的类绑定需求，可以在这里补充 -->
  >
    <!-- 子级循环：遍历品丝 -->
    <div
      v-for="fret in fretNumbers" 
      :key="fret"
      class="fret"
      <!-- 动态类绑定：仅当父级是第一个元素（stringNumber===0）且fret在fretMark1数组中时，添加类 -->
      :class="{
        'fret-mark-1': stringNumber === 0 && fretMark1.includes(fret)
      }"
    >
      <!-- 条件渲染：只有满足上述双条件时，才渲染这段HTML -->
      <span v-if="stringNumber === 0 && fretMark1.includes(fret)" class="mark-indicator">
        <!-- 这里可以放你要渲染的内容，比如品记标记或编号 -->
        {{ fret }}
      </span>
    </div>
  </div>
</div>

关键细节说明 #

1. 更简洁的数组判断：用fretMark1.includes(fret)代替fretMark1.indexOf(fret) >= 0，语法更直观，ES6+环境下完全兼容（Vue项目默认支持）。
2. 动态类的对象语法：:class接收一个对象，键是要添加的类名，值是布尔表达式——表达式为true时，该类会被添加到元素上，同时不会覆盖原本的fret类。
3. 条件渲染的两种场景：
   • 如果你只是需要给满足条件的品丝添加类，同时保留所有品丝的渲染，就用上面的写法；
   • 如果你只需要渲染满足条件的品丝（其他品丝不显示），可以把v-if直接加到子级的div上：

     <div
       v-for="fret in fretNumbers" 
       :key="fret"
       v-if="stringNumber === 0 && fretMark1.includes(fret)"
       class="fret fret-mark-1"
     >
       <!-- 品丝内容 -->
     </div>
     

4. 必须加:key：Vue要求v-for循环的元素必须绑定唯一的:key，避免渲染时出现复用错误。

配套的Data定义 #

别忘了在组件的data里定义对应的变量，确保循环和判断能正常工作：

export default {
  data() {
    return {
      numberOfStrings: 6, // 比如6弦吉他的琴弦数量
      fretNumbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12], // 要渲染的品丝编号
      fretMark1: [3, 5, 7, 9, 12] // 需要标记的品丝数组
    }
  }
}

内容的提问来源于stack exchange，提问作者Morten Vestergaard