vue项目中如何展示html标签

在Vue.js项目中，你可以直接将HTML内容插入到模板（template）里来显示。Vue会解析并渲染这些HTML。下面是一个简单的例子：

<template>
  <div>
    <h1>这是一个标题</h1>
    <p>{{ message }}</p> <!-- 这里的 {{ message }} 将会被数据绑定 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '<strong>Hello, Vue!</strong>'
    }
  }
}
</script>

在这个例子中，`message`的数据属性被设置为HTML字符串。当`message`改变时，对应的HTML将会动态更新。

如果你想在某个元素内插入HTML，可以使用`v-html`指令，如：

<div v-html="unsafeHtml"></div>

<script>
export default {
  data() {
    return {
      unsafeHtml: '<span style="color:red;">这是包含HTML的文本</span>'
    }
  },
  // 确保你已经安装了@sanity/vue-vue-template-compiler插件，并且配置了安全策略
  computed: {
    safeHtml() {
      return this.$sanitize(this.unsafeHtml);
    }
  }
}
</script>

这里使用了`$sanitize()`函数来确保HTML不会导致安全风险。