Maison > interface Web > Questions et réponses frontales > Comment implémenter la fonction de cliquer pour sélectionner une liste de produits dans vue

Comment implémenter la fonction de cliquer pour sélectionner une liste de produits dans vue

PHPz
Libérer: 2023-03-31 13:59:51
original
1507 Les gens l'ont consulté

Récemment, je travaille sur un site de commerce électronique et j'ai besoin d'implémenter la fonction de clic pour sélectionner une liste de produits. J'en ai profité pour apprendre le framework Vue.

Dans Vue, il est très simple de cliquer sur la liste sélectionnée. Il vous suffit d'utiliser l'instruction v-on et l'instruction v-bind fournies par Vue.

Tout d'abord, définissez une liste de produits dans le modèle, avec une case à cocher derrière chaque produit.

<ul>
  <li v-for="item in itemList">
    <input type="checkbox" v-bind:id="item.id" v-model="item.checked"/>
    <label v-bind:for="item.id">{{item.name}}</label>
  </li>
</ul>
Copier après la connexion

L'instruction v-for ici est une instruction de boucle dans Vue, qui est utilisée pour parcourir chaque élément du tableau itemList. La directive v-bind est une directive de liaison d'attributs dans Vue, qui peut lier des données dans Vue à des éléments HTML. La directive v-model est une directive de liaison bidirectionnelle dans Vue, qui peut réaliser une synchronisation bidirectionnelle des données.

Dans data, déclarez le tableau itemList et initialisez les attributs id, name et vérifié de chaque élément.

data() {
  return {
    itemList: [
      {
        id: 'item1',
        name: '商品1',
        checked: false
      },
      {
        id: 'item2',
        name: '商品2',
        checked: false
      },
      {
        id: 'item3',
        name: '商品3',
        checked: false
      }
    ]
  }
}
Copier après la connexion

Lorsque l'utilisateur clique sur la case à cocher, l'événement de clic sera déclenché. Il nous suffit de définir une méthode toggleCheck dans les méthodes pour inverser le statut de la case à cocher actuellement sélectionnée.

methods: {
  toggleCheck(item) {
    item.checked = !item.checked;
  }
}
Copier après la connexion

Enfin, utilisez la directive v-on dans le modèle pour lier l'événement click et appeler la méthode toggleCheck.

<input type="checkbox" v-bind:id="item.id" v-model="item.checked" v-on:click="toggleCheck(item)"/>
Copier après la connexion

De cette façon, vous pouvez réaliser la fonction de cliquer sur la liste sélectionnée.

Pour résumer, il est très simple d'implémenter une liste de clics dans Vue. Il vous suffit d'utiliser les instructions v-for, v-bind, v-model et v-on fournies par Vue pour lier les données. en HTML et Vue. Implémentez la synchronisation bidirectionnelle des données et la liaison des événements. Le framework Vue est non seulement peu coûteux à apprendre, mais également très adapté au développement de projets de petite et moyenne taille. Si vous souhaitez également améliorer vos compétences front-end, autant apprendre le framework Vue !

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal