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

Vue est un framework JavaScript populaire qui facilite la création d'applications Web interactives à l'aide de Vue. Dans cet article, nous verrons comment implémenter une liste réduite à l'aide de Vue. Les listes de réduction sont un composant interactif courant qui permet aux utilisateurs de développer et de réduire leur contenu.

Dans Vue, nous pouvons facilement implémenter des listes réduites en utilisant les instructions v-if et v-show. Ces deux directives ont des fonctions similaires et peuvent contrôler la visibilité des éléments. v-if ajoutera ou supprimera des éléments en fonction des conditions, tandis que v-show basculera uniquement l'état affiché ou masqué d'un élément.

Tout d'abord, nous devons créer une instance Vue et la monter sur un élément HTML. Définissez ensuite un tableau qui contiendra tous les éléments de la liste réduite. Dans cet exemple, nous supposons que les éléments de la liste sont au format suivant :

{
  title: 'Item 1',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},

Nous devons également définir un bouton dans le modèle qui bascule la visibilité de chaque élément de la liste. Nous pouvons y parvenir en utilisant la directive v-show. Lorsque vous cliquez sur le bouton, nous basculerons l’état afficher/masquer du contentDiv.

Ce qui suit est un modèle de composant de liste pliante de base :

<div id="app">
  <h2>折叠列表</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <button @click="toggle(index)">展开/收起</button>
      <h3>{{ item.title }}</h3>
      <div v-show="item.showContent" class="contentDiv">{{ item.content }}</div>
    </li>
  </ul>
</div>

Ensuite, nous devons définir un tableau d'éléments de liste et une fonction de bascule dans l'instance Vue pour basculer chaque élément. visibilité de l'élément de liste. La fonction bascule acceptera un paramètre, qui est l'index de l'élément de liste à basculer. Cette fonction inverse la propriété showContent de l'élément et met également à jour l'état du composant.

new Vue({
  el: '#app',
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        showContent: false
      },
      {
        title: 'Item 2',
        content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        showContent: false
      },
      {
        title: 'Item 3',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        showContent: false
      }
    ]
  },
  methods: {
    toggle: function(index) {
      this.items[index].showContent = !this.items[index].showContent;
    }
  }
})

Enfin, nous devons ajouter quelques styles CSS au composant pour contrôler son apparence et sa mise en page.

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
}

.contentDiv {
  margin-top: 10px;
}

Maintenant, nous avons terminé un simple composant de liste réduite. Nous pouvons utiliser ce composant pour afficher une liste interactive dans notre application. Nous pouvons étendre ce composant en ajoutant des styles personnalisés et d'autres fonctionnalités.

En bref, Vue est un framework front-end très puissant qui fournit de nombreuses fonctionnalités utiles qui facilitent la création d'applications Web interactives. En utilisant Vue, nous pouvons facilement implémenter des composants d'interface utilisateur complexes, y compris des listes réduites.

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!