Maison >interface Web >Voir.js >Méthodes et exemples d'ajout dynamique d'attributs à l'aide de la fonction Vue.set

Méthodes et exemples d'ajout dynamique d'attributs à l'aide de la fonction Vue.set

王林original: 2023-07-24 19:22:472359parcourir

Méthodes et exemples d'utilisation de la fonction Vue.set pour ajouter dynamiquement des propriétés

Dans Vue, si nous voulons ajouter dynamiquement une propriété à un objet existant, nous utilisons généralement la fonction Vue.set pour y parvenir. La fonction Vue.set est une méthode globale fournie par Vue.js, qui peut garantir des mises à jour réactives lors de l'ajout de propriétés. Cet article présentera l'utilisation de Vue.set et fournira un exemple spécifique.

Tout d'abord, dans Vue, nous utilisons généralement l'option data pour déclarer des données réactives. Les propriétés déclarées dans l'option de données seront automatiquement suivies par Vue.js pour les modifications et la vue sera automatiquement mise à jour en fonction des modifications. Cependant, si nous essayons d'ajouter une nouvelle propriété directement à un objet existant, Vue ne pourra pas détecter le changement, ce qui empêchera la vue de se mettre à jour correctement. Pour le moment, nous devons utiliser Vue.set au lieu de la méthode d'ajout d'attributs native.

L'utilisation de Vue.set est très simple. Il accepte trois paramètres : l'objet cible, le nom de l'attribut et la valeur de l'attribut. Après avoir appelé la fonction Vue.set, Vue ajoutera une propriété réactive à l'objet cible et garantira que la vue est correctement mise à jour. Maintenant, démontrons l'utilisation de Vue.set à travers un exemple concret.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="addProperty">添加属性</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: '原始属性'
        }
      },
      methods: {
        addProperty() {
          Vue.set(this, 'newProperty', '新属性值');
        }
      }
    })
  </script>
</body>
</html>

L'instance Vue dans l'exemple ci-dessus déclare un objet de données et initialise une propriété de message dans data. Dans la page, nous affichons la valeur de l'attribut message et fournissons un bouton Lorsque vous cliquez sur le bouton, la méthode addProperty est appelée.

Dans la méthode addProperty, nous utilisons la fonction Vue.set pour ajouter dynamiquement un attribut newProperty à l'instance Vue, dont la valeur est la "nouvelle valeur de propriété". Lorsque nous cliquons sur le bouton, les nouvelles propriétés seront ajoutées à l'instance Vue et les modifications seront automatiquement suivies par Vue afin que la vue soit correctement mise à jour. Vous pouvez voir sur la page que la valeur du nouvel attribut est également rendue correctement.

Résumé

L'utilisation de la fonction Vue.set peut garantir que les attributs ajoutés dynamiquement seront correctement suivis par Vue.js et mettront à jour la vue. Dans le développement réel, si nous devons ajouter dynamiquement des attributs à un objet, n'utilisez pas directement la méthode d'ajout d'attributs native. Il est recommandé d'utiliser plutôt la fonction Vue.set. Cela garantit une mise à jour réactive des données et donc un rendu correct de la page.

J'espère que cet exemple simple pourra vous aider à comprendre et à maîtriser l'utilisation de la fonction Vue.set. Dans le développement réel, lorsque vous rencontrez des besoins similaires, vous pouvez utiliser de manière flexible la fonction Vue.set pour ajouter dynamiquement des attributs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la fonction Vue.compile et comment rendre des modèles dynamiquesArticle suivant：Explication détaillée de la fonction Vue.compile et comment rendre des modèles dynamiques

Articles Liés

Voir plus