Vue 加载 HTML 代码的方法及优化

有一些字符串 html 代码需要渲染，如 <u>Hello</u>world，大家都说用 v-html，但是 v-html 有个问题，看一下下面的代码

<div>
  <span v-html="'<u>Hello</u>world'"></span>
</div>

会输出

<div>
  <span><u>Hello</u>world</span>
</div>

而我们期望的效果是直接输出

<div><u>Hello</u>world</div>

然后我在网上翻，发现了个牛逼代码：

Vue 代码

<span v-string="'<u>Hello</u>world'"></span>

Vue.directive('string', {
  inserted(el, bind) {
    el.insertAdjacentHTML('beforeend', bind.value);
  },
});

后记

答案在这找到的，这家伙问的挺好的，竟然给了个负分，答案绝对是好评：vue-js-render-text-with-html-content

复习一下元素操作 api：MND - insertAdjacentHTML