vue3 v-html 插入dom 正确的写法请教？

  <div v-for=" item in menuSide" :id="item.id">
           <span  >{{ item.icon} }{{item.title}}</span>  // 目的 是要这个 icon图标从 menuSide 对象中读取
           icon元素：{{ item.icon} } 这样写肯定是不行的。外面包个dom  这样也不行 <span v-html="item.icon"></span> 
           以前静态的写法：<span  ><history-outlined />{{item.title}}</span>   
          请教正确的写法
   </div>


const menuSide =[
  {id:'1',title:'a',icon:'<history-outlined />',  // <history-outlined /> 是 ang design ui的图标
 },
  {id:'2',title:'a',icon:'<tool-outlined />',    // <tool-outlined /> 是 ang design ui的图标
 },
]

你可以了解下 动态组件

components is

循环一下组件名这种，应该是能满足你的需求的

v-html并不能写自定义组件 楼上给出答案了

v-html只能渲染html。<history-outlined这个相当于一个组件的，用v-html并不能渲染
动态图标参考下这篇文章
https://blog.csdn.net/m0_53056203/article/details/124568024

```html
<span v-html="item.icon"></span>{{item.title}}

```
这样不行？

<div
      v-for="item in menuSide"
      :key="item.id"
    >
      <span>{{ item.icon}}{{item.title}}</span>icon元素：{{ item.icon}} <component :is="item.icon"></component>
    </div>

 menuSide = [
    {
      id: "1",
      title: "a",
      icon: "history-outlined", // <history-outlined /> 是 ang design ui的图标
    },
    {
      id: "2",
      title: "a",
      icon: "history-outlined", // <tool-outlined /> 是 ang design ui的图标
    },
  ];

v-html只能渲染html的内置标签，<history-outlined>属于是自定义标签，所以v-html不支持
可参考 https://blog.csdn.net/xlgdst/article/details/115732864

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632