Comment implémenter une liste pliable à l'aide de Vue ?

Vue est une bibliothèque JavaScript populaire largement utilisée dans le domaine du développement Web. Dans Vue, nous pouvons facilement implémenter divers composants et effets interactifs. Parmi eux, la liste pliable est un composant plus pratique. Elle peut regrouper les données de la liste pour améliorer la lisibilité de l'affichage des données. En même temps, elle peut être étendue lorsqu'un contenu spécifique doit être développé, ce qui permet aux utilisateurs de visualiser facilement les détails. information. Cet article explique comment utiliser Vue pour implémenter une liste pliable.

1. Travail de préparation

Avant d'utiliser Vue pour implémenter une liste pliable, nous devons préparer le travail suivant :

#🎜🎜 #1.1 Environnement Vue : installez Vue.js, qui peut être introduit via le téléchargement du site officiel ou l'introduction du CDN.

1.2 Préparation des données : Préparez les données à afficher, qui peuvent être un tableau ou un objet. Chaque élément contient le titre et le contenu des données affichées.

Structure HTML

Notre liste pliable se compose principalement de deux parties, l'une est la partie titre de la liste d'affichage, l'autre est l'affichage partie du contenu de la liste. Parmi eux, la partie titre doit définir l'événement click pour déclencher l'expansion et la réduction de la partie contenu. Par conséquent, nous pouvons utiliser l'instruction v-for de Vue pour parcourir la liste de rendu et lier l'événement click en même temps, comme indiqué ci-dessous :

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

Dans ce code, nous utilisons un élément d'habillage qui contient un ul et un ensemble de divs. Parmi eux, plusieurs li dans la partie titre sont rendus en ul, et le contenu de chaque li est item.title. Le contenu étendu correspondant à chaque li est contrôlé par l'instruction v-show. Lorsque item.show est vrai, le contenu développé sera affiché.

JavaScript Logic

Ensuite, nous devons écrire une logique JavaScript pour implémenter la fonction de la liste réductible. Les étapes spécifiques sont les suivantes. : #🎜🎜 #

3.1 Définir la structure des données

Nos données doivent comprendre deux parties, l'une est le titre de la liste et l'autre est le contenu correspondant de la liste. Par conséquent, nous pouvons définir une structure de données comme suit :

data() {
  return {
    dataList: [
      {
        title: "列表标题1",
        content: "列表1的详细内容",
        show: false,
      },
      {
        title: "列表标题2",
        content: "列表2的详细内容",
        show: false,
      },
      {
        title: "列表标题3",
        content: "列表3的详细内容",
        show: false,
      },
    ],
  };
},

Parmi eux, le paramètre show est utilisé pour contrôler si la partie développée est affichée. Initialement, nous voulons que les parties développées soient fermées, nous définissons donc la valeur show sur false.

3.2 Cliquez pour changer l'état développé

Nous devons lier un événement click à l'élément li dans la partie titre pour obtenir l'effet clic développer/réduire. Nous pouvons changer l'état d'expansion correspondant à chaque liste en appelant la méthode toggle. Le code spécifique est le suivant :

methods: {
  toggle(index) {
    const item = this.dataList[index];
    item.show = !item.show;
  },
},

Dans la méthode toggle, nous obtenons l'élément de liste actuel et le contrôlons en modifiant le show paramètre. Afficher et masquer le contenu développé.

Paramètres de style

4. Enfin, nous devons styliser la liste pour qu'elle s'affiche plus joliment.

li {
  background: #eee;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

En CSS, nous stylisons chaque élément li. Nous avons également modifié la couleur d’arrière-plan au survol de la souris. Le style de la section de contenu étendu a également été défini simplement.

À ce stade, nous avons terminé la mise en œuvre de la liste pliable. Le code complet est le suivant :

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "列表标题1",
          content: "列表1的详细内容",
          show: false,
        },
        {
          title: "列表标题2",
          content: "列表2的详细内容",
          show: false,
        },
        {
          title: "列表标题3",
          content: "列表3的详细内容",
          show: false,
        },
      ],
    };
  },
  methods: {
    toggle(index) {
      const item = this.dataList[index];
      item.show = !item.show;
    },
  },
};
</script>

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!