Vue中如何在v-for循环里无包裹渲染item的HTML属性？

你遇到的问题其实是Vue模板机制的限制：v-html必须绑定在真实DOM元素上，而<template>只是模板占位符，不会生成真实DOM，所以直接在上面用v-html是无效的；用<div>包裹又会多一层不必要的容器，破坏结构。下面给你两个可行的解决方案：

方案一：自定义指令（Vue2/Vue3通用） #

这是最直接且跨版本兼容的方法，我们可以写一个自定义指令，直接把所有HTML内容插入到目标容器中，不需要额外包裹元素。

步骤1：注册自定义指令 #

在你的Vue项目中注册全局指令（也可以局部注册在单个组件里）：

// Vue3 全局注册示例
import { createApp } from 'vue';
const app = createApp(App);

app.directive('html-collection', {
  // 元素挂载时插入HTML内容
  mounted(el, binding) {
    renderHtmlCollection(el, binding.value);
  },
  // 数据更新时清空重渲染，避免重复内容
  updated(el, binding) {
    el.innerHTML = '';
    renderHtmlCollection(el, binding.value);
  }
});

// 封装通用渲染逻辑
function renderHtmlCollection(el, items) {
  if (!Array.isArray(items)) return;
  items.forEach(item => {
    if (item?.html) {
      el.insertAdjacentHTML('beforeend', item.html);
    }
  });
}

步骤2：在模板中使用 #

只需要一个容器元素，指令会自动把所有HTML内容直接插入其中：

<div v-html-collection="outlineItems"></div>

最终渲染后的DOM结构就是你想要的：<h1>...</h1><h2>...</h2>...，没有额外的包裹层。

方案二：Vue3 用渲染函数生成多根节点 #

如果你使用Vue3，可以利用它的多根节点特性，写一个简单组件直接返回所有渲染后的HTML节点：

<script setup>
import { h } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true
  }
});

// 将HTML字符串转为真实DOM节点，再转换为Vue的VNode
const getRenderedNodes = () => {
  const tempContainer = document.createElement('div');
  props.items.forEach(item => {
    if (item?.html) {
      tempContainer.insertAdjacentHTML('beforeend', item.html);
    }
  });
  return Array.from(tempContainer.childNodes).map(node => h(node));
};
</script>

<template>
  <component :is="getRenderedNodes()" />
</template>

然后在父组件中引入这个组件即可：

<HtmlRenderer :items="outlineItems" />

这个方案同样能实现无包裹渲染，适合纯Vue3的项目场景。

重要提醒 #

无论用哪种方法，都要确保item.html的内容是可信的，避免XSS攻击风险。如果内容来自用户输入，一定要先做安全过滤处理。

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