Ajout de directives Vue aux éléments par programmation : un guide étape par étape pour v-if

Question

Nous pouvons ajouter par programme des attributs personnalisés aux éléments en utilisant du JS pur, qu'en est-il des directives Vue comme element.attr('data-attr', someValue)，但是像 v-if

Compte tenu des éléments suivants

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

Comment ajouter v-if par programmation ? Je pose cette question à des fins d'automatisation, car il y aura des centaines de variables dynamiques qui peuvent exister ou non.

Le résultat souhaité est

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

La seule étape que je connais est d'utiliser les éléments de ref 获取 created() .

Answer 1

Selon la déclaration - Il y aura des centaines de variables dynamiques qui peuvent exister ou non. Mais si je vois dans ton commentaire tu as dit > pas de boucles . Alors, comment restituer des éléments dynamiques ?

D'après ma compréhension, vous souhaitez lier dynamiquement les attributs de données dans le modèle HTML. Vous pouvez essayer cette solution et voir si elle répond à vos besoins.

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>

L'extrait de code ci-dessus fonctionne toujours avec les propriétés dynamiques existantes.