v-html 内容未正确呈现

Question

v-html 内容未正确呈现，altohught 当我在第一个 li 中删除 v-html 它工作正常。

这是我的代码。

<div>

  <br>
  <li v-html="`a`">
    <ul>
      <li v-html="`c`"> b </li>
    </ul>
  </li>
  <br>

</div>

为什么不呈现“c”和“b”，我做错了什么？

Answer 1

v-html 将一些给定的 HTML 呈现为使用 v-html 指令的标签的内容。 您不能同时使用 v-html 和子元素并让它们一起工作，在这种情况下 v-html 会覆盖子元素。

Answer 2

v-html基本上是说 -使用当前活动实例上的 rawHtml 属性使该元素的内部 HTML 保持最新。

因此， li的内容将替换为v-html中传递的 rawHtml 属性的值。 这就是您看不到li的内部 HTML 内容的原因。

此外，无需使用反引号，因为v-html是 Vue 的预定义指令，它将接受该属性作为 rawHtml。

现场演示：

 new Vue({ el: '#app', data: { a: '<ul>Render outer li Html</ul>', c: '<ul>Render inner li Html</ul>' } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <li v-html="a"> <ul> <li v-html="c">b</li> </ul> </li> </div>