Vue中如何在标记v-html指令的父元素内嵌入子元素

原因说明 #

v-html 指令的默认逻辑是直接用绑定的HTML内容覆盖当前元素的全部innerHTML，所以写在带有v-html的标签内部的嵌套内容会被直接覆盖，自然不会渲染到DOM中。

解决方案 #

根据你的实际需求可以选择以下两种实现方式：

• 方案1：嵌套额外容器，把v-html绑定到独立子节点，自定义元素和它平级放置
  这种方案不需要修改原数据，只需要调整模板结构即可，是最常用的处理方式：

  <span v-for="(word, index) in words" :key="index">
    <!-- 单独用一个标签承载v-html渲染的内容 -->
    <span v-html="word"></span>
    <!-- 自定义内容和上述标签平级，不会被覆盖 -->
    <span>test</span>
  </span>
  

• 方案2：提前拼接HTML字符串再绑定给v-html
  如果你确实需要把自定义内容插入到v-html渲染内容的内部，可以先在脚本层拼接好完整的HTML字符串再绑定：

  // 示例：在每个word的HTML末尾拼接自定义span内容
  const processedWords = words.map(word => `${word}<span>test</span>`)
  

  模板直接绑定处理后的数组即可：

  <span v-for="(word, index) in processedWords" :key="index" v-html="word"></span>
  

注意事项 #

使用v-html时请务必确保绑定的HTML内容来源可信，不要直接渲染未经过滤的用户提交内容，避免出现XSS安全漏洞。

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