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

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>

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
      }
    ]
  }
}

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;
  }
}

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)"/>

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!