recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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() .

P粉883973481P粉883973481526 Il y a quelques jours659

répondre à tous(1)je répondrai

  • P粉764785924

    P粉7647859242023-09-08 12:52:54

    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.

    répondre
    0
  • Annulerrépondre