vue3 v-html中带尖括号的字符串

在Vue 3中，如果要在`v-html`指令中渲染带有尖括号的字符串，你需要对字符串进行编码。这是因为Vue默认会将字符串中的HTML标签解析为HTML元素，而不是作为纯字符串处理。

你可以使用`v-html`指令结合`encodeURIComponent`函数来实现编码。下面是一个示例：

<template>
  <div>
    <div v-html="encodedHtml"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<span>Hello &lt;World&gt;</span>',
      encodedHtml: '',
    };
  },
  mounted() {
    this.encodedHtml = encodeURIComponent(this.rawHtml);
  },
};
</script>

在上面的示例中，我们定义了一个原始的HTML字符串`rawHtml`，其中包含尖括号。然后，我们在`mounted`生命周期钩子中使用`encodeURIComponent`对字符串进行编码，并将编码后的结果赋值给`encodedHtml`。最后，我们通过`v-html`指令将编码后的字符串渲染到页面上。

这样做可以确保尖括号被当做纯文本渲染，而不会被解析为HTML标签。