以程式設計方式為元素新增 Vue 指令：v-if 的逐步指南

Question

我們可以使用純JS 以程式方式為元素添加自訂屬性，例如element.attr('data-attr', someValue)，但是像v-if 這樣的Vue 指令又如何呢

給定以下元素

<p v-html="data.title"></p>

如何以程式設計方式新增 v-if？我問這個是為了自動化，因為將有數百個可能存在也可能不存在的動態變數。

期望的結果是

<p v-if="data.title" v-html="data.title"></p>

我知道的唯一步驟是使用 ref 取得 created() 中的元素。

Answer 1

根據聲明 - 將有數百個可能存在或可能不存在的動態變數。 但是如果我在您的評論中看到，您說 >無循環#。那你如何渲染動態元素？

根據我的理解，您希望將資料屬性動態綁定到 HTML 模板中。您可以嘗試這個解決方案，看看它是否符合您的要求。

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

上面的程式碼片段總是適用於現有的動態屬性。