Wie implementiert man eine reduzierte Liste mit Vue?

Vue ist ein beliebtes JavaScript-Framework, das die Erstellung interaktiver Webanwendungen mit Vue vereinfacht. In diesem Artikel besprechen wir, wie man eine reduzierte Liste mit Vue implementiert. Minimierungslisten sind eine gängige interaktive Komponente, mit der Benutzer ihre Inhalte erweitern und reduzieren können.

In Vue können wir mithilfe der Anweisungen v-if und v-show ganz einfach reduzierte Listen implementieren. Diese beiden Anweisungen haben ähnliche Funktionen und können die Sichtbarkeit von Elementen steuern. v-if fügt Elemente basierend auf Bedingungen hinzu oder entfernt sie, während v-show nur den angezeigten oder ausgeblendeten Status eines Elements umschaltet.

Zuerst müssen wir eine Vue-Instanz erstellen und sie auf einem HTML-Element bereitstellen. Definieren Sie dann ein Array, das alle Elemente in der minimierten Liste enthält. In diesem Beispiel gehen wir davon aus, dass die Listenelemente wie folgt formatiert sind:

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

Außerdem müssen wir in der Vorlage eine Schaltfläche definieren, die die Sichtbarkeit jedes Listenelements umschaltet. Dies können wir mit der v-show-Direktive erreichen. Wenn auf die Schaltfläche geklickt wird, schalten wir den Ein-/Ausblenden-Status des contentDiv um.

Hier ist eine grundlegende Vorlage für zusammenklappbare Listenkomponenten:

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

Als nächstes müssen wir ein Array von Listenelementen und eine Umschaltfunktion in der Vue-Instanz definieren, um die Sichtbarkeit jedes Listenelements umzuschalten. Die Umschaltfunktion akzeptiert einen Parameter, nämlich den Index des umzuschaltenden Listenelements. Diese Funktion invertiert die showContent-Eigenschaft des Elements und aktualisiert außerdem den Status der Komponente.

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

Abschließend müssen wir der Komponente einige CSS-Stile hinzufügen, um deren Aussehen und Layout zu steuern.

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

Jetzt haben wir eine einfache zusammenklappbare Listenkomponente fertiggestellt. Mit dieser Komponente können wir eine interaktive Liste in unserer Anwendung anzeigen. Wir können diese Komponente erweitern, indem wir benutzerdefinierte Stile und andere Funktionen hinzufügen.

Kurz gesagt ist Vue ein sehr leistungsstarkes Front-End-Framework, das viele nützliche Funktionen bietet, die die Erstellung interaktiver Webanwendungen einfacher machen. Mit Vue können wir komplexe UI-Komponenten, einschließlich Kollapslisten, problemlos implementieren.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine reduzierte Liste mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!