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>