Un guide complet sur la liaison HTML, la gestion d’événements et l’itération de boucle / Blogs / Perficient

Manipulation d’objets interactifs

Ajout et affichage dynamique de propriétés :

<template>
    <div>
      <h2>Iterating Over an Object in Vue.js</h2>
      <ul>
        <li v-for="(value, key) in user" :key="key">
          {{ key }}: {{ value }}
        </li>
      </ul>
  
      <div>
        <input type="text" v-model="newKey" placeholder="New key">
        <input type="text" v-model="newValue" placeholder="New value">
        <button @click="addProperty">Add Property</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
          name: 'John',
          age: 30,
          email: 'john@example.com'
        },
        newKey: '',
        newValue: ''
      };
    },
    methods: {
      addProperty() {
        if (this.newKey && this.newValue) {
          this.user[this.newKey] = this.newValue;
          this.newKey = '';
          this.newValue="";
        }
      }
    }
  };
  </script>

• Le modèle affiche les propriétés existantes de l’objet utilisateur et fournit des champs de saisie pour ajouter de nouvelles propriétés.
• Les propriétés de données user, newKey et newValue sont initialisées.
• Les propriétés existantes sont rendues à l’aide de v-for.
• Lorsque l’utilisateur clique sur le bouton « Ajouter une propriété », la méthode addProperty est déclenchée.
• La méthode vérifie si une nouvelle clé et une nouvelle valeur sont fournies.
• Si elle est fournie, la nouvelle propriété est ajoutée à l’objet utilisateur et les champs de saisie sont effacés.
• js met automatiquement à jour l’interface utilisateur pour refléter les modifications apportées à l’objet utilisateur.

Cette configuration permet aux utilisateurs d’ajouter dynamiquement de nouvelles propriétés à l’objet utilisateur, garantissant ainsi que l’interface utilisateur reste synchronisée avec les données.

Sortir:

Rendu conditionnel dans Vue.js

Vue.js fournit un moyen pratique de restituer conditionnellement des éléments HTML en fonction de la valeur des propriétés de données à l’aide de l’option v-si, v-sinon-si, et v-sinon directives.

<template>
  <div>
    <p v-if="isLoggedIn">Welcome, {{ username }}!</p>
    <p v-else-if="isPending">Logging in...</p>
    <p v-else>Please log in to continue.</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isLoggedIn: false,
      isPending: false,
      username: ''
    };
  }
}
</script>

Ainsi, lorsque le composant est rendu :

• Si isLoggedIn est vrai, il affiche un message de bienvenue avec le nom d’utilisateur.
• Si isPending est vrai, il affiche un message indiquant le processus de connexion en cours.
• Si ni isLoggedIn ni isPending ne sont vrais, il invite l’utilisateur à se connecter.

Cette structure permet une présentation dynamique du contenu basée sur l’état de connexion, ce qui est un modèle courant dans les applications Web.

Sortir:

Liaison de plusieurs méthodes et fonctions au même élément

Vous pouvez lier plusieurs méthodes et fonctions au même élément HTML en les enchaînant à l’aide de l’attribut v-on directive ou la @ sténographie.

<template>
  <div id="app">
    <button @click="incrementCounter">Increment</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
      this.logMessage(); // Call the logMessage method when the button is clicked
    },
    logMessage() {
      console.log('Button clicked!');
    }
  }
}
</script>

Sortir:

Dans cet exemple, les méthodes IncreaseCounter et logMessage sont exécutées lorsque le bouton clique.

Classes de liaison dans Vue.js

De même, vous pouvez lier dynamiquement des classes CSS à des éléments HTML en fonction des propriétés des données à l’aide de la directive v-bind:class.

<template>
    <div v-bind:class="{ active: isActive, 'text-bold': isBold }">Dynamic Class Binding</div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            isActive: true,
            isBold: false
        }
    }
}
</script>

Sortir:

Dans cet exemple, la classe active est appliquée si c’est actif est vrai, et la classe text-bold est appliquée si Boule de Glace est vrai.

Directives supplémentaires :

modèle en V

v-model est utilisé pour la liaison de données bidirectionnelle sur les éléments d’entrée du formulaire. Il choisit automatiquement la bonne façon de mettre à jour l’élément en fonction du type d’entrée.

<template>
   <input type="text" v-model="message">
  <p>{{ message }}</p>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
              message: ''
        }
    }
}
</script>

Sortir:

v-show :

v-show bascule la visibilité d’un élément en fonction d’une valeur de vérité. Contrairement à v-if, il ne supprime pas l’élément du DOM mais active la propriété d’affichage CSS.

<template>
  <div>
    <p v-show="isVisible">This paragraph is visible</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
}
</script>

Sortir:

Cliquer sur le bouton fait basculer la valeur de isVisible, ce qui entraîne le masquage du texte s’il était auparavant visible et vice versa.

Conclusion

Ce guide présente de manière concise les concepts essentiels de Vue.js pour créer des applications Web dynamiques. Il couvre la liaison de données, la gestion des événements, le bouclage des données, le rendu conditionnel, la liaison dynamique de classes et d’attributs, et introduit des directives clés telles que v-model et v-show. En maîtrisant ces principes fondamentaux, les développeurs peuvent créer efficacement des applications Vue.js interactives et réactives.