v-html内容渲染异常咨询：父级v-html移除后子元素恢复正常

原因分析 #

• 给<li>加v-html指令时，Vue会完全覆盖该元素的所有原有子内容，用指令绑定的内容替换掉元素的innerHTML。你的第一个<li>绑定了'a'，所以原来嵌套的<ul>整个被替换成了文本a，内部的<li>内容自然就没了。
• 移除第一个<li>的v-html后，元素的原有子节点被保留，所以内部的<ul>和<li>能正常渲染。

操作误区 #

你错在给包含子元素的<li>用了v-html，忽略了它的核心特性：不是追加内容，而是直接替换掉目标元素的全部内部内容。

修正方案 #

如果要在第一个<li>里同时显示a和嵌套的<ul>，有两种常用方式：

1. 把a和<ul>整合到v-html的内容中：

<div>
  <br>
  <li v-html="`a<ul><li> b ${c} </li></ul>`"></li>
  <br>
</div>

注意：这种方式里内部的v-html指令不会被Vue解析，因为v-html的内容是纯HTML字符串，Vue不会编译其中的指令。

2. 拆分结构，把a放在单独节点，避免覆盖子元素：

<div>
  <br>
  <li>
    {{ a }}
    <ul>
      <li v-html="c"> b </li>
    </ul>
  </li>
  <br>
</div>

这种方式更贴合Vue的使用逻辑，还能保留内部Vue指令的功能。

内容的提问来源于stack exchange，提问作者Houch