vue3动态添加html标签

在Vue3中可以使用与Vue2相同的方法动态添加HTML标签，但也有一些新的API可以使用。

1. 使用v-html指令

Vue3中仍然支持使用v-html指令来插入HTML标记。使用方法与Vue2相同。

例如，将一个字符串渲染为一个段落元素：

<template>
  <div>
    <p v-html="myHtml"></p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myHtml = ref('<span style="color:red;">这是一个段落</span>')
    return { myHtml }
  }
}
</script>

2. 使用createApp API

Vue3中可以使用createApp API来创建Vue实例，它提供了一种新的方式来动态创建HTML元素。

例如，将一个字符串渲染为一个段落元素：

<template>
  <div>
    <div ref="container"></div>
  </div>
</template>

<script>
import { ref, createApp } from 'vue'

export default {
  mounted() {
    const container = this.$refs.container;
    const app = createApp({
      template: '<p><span style="color:red;">这是一个段落</span></p>'
    });
    app.mount(container);
  }
}
</script>

以上两种方法都可以实现动态添加HTML标签。需要注意的是，在使用v-html指令时，需要注意安全性问题，确保不会插入恶意代码。同时，在使用createApp API时，需要确保元素的生命周期得到正确的管理，并且需要为每个动态创建的Vue实例提供唯一的ID。