Vue-Datenanzeige ausblenden

Bei der Vue-Entwicklung müssen wir häufig Daten ausblenden oder anzeigen. Beispielsweise müssen wir möglicherweise unter bestimmten Umständen einige sensible Daten ausblenden oder bestimmte Daten anzeigen, wenn bestimmte Bedingungen erfüllt sind. Vue bietet verschiedene Möglichkeiten zum Ausblenden und Anzeigen von Daten. Als nächstes stellen wir diese Methoden vor.

1. Bedingtes Rendering

Vues bedingte Rendering-Anweisungen können V-If- oder V-Show-Anweisungen zu DOM-Elementen hinzufügen, um zu steuern, ob die DOM-Elemente basierend auf der wahren oder falschen Bedingung angezeigt werden. Die Verwendung dieser beiden Anweisungen ist unterschiedlich: Die

v-if-Anweisung entfernt Elemente aus dem DOM oder fügt sie dem DOM erneut hinzu, sodass sie für intensivere Vorgänge oder Situationen mit einer großen Anzahl von Unterkomponenten verwendet werden kann.

Die V-Show-Anweisung blendet Elemente über das Anzeigeattribut von CSS ein und aus. Da das Element selbst immer im DOM vorhanden ist, verarbeitet die v-show-Direktive sowohl einfache als auch normale Operationen effizienter.

Hier ist ein einfaches Beispiel:

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showText">这里是需要显示的文本。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
}
</script>

In diesem Beispiel deklarieren wir ein Datenattribut namens showText. Abhängig vom Wert von showText können wir das Anzeigen und Ausblenden von Text über die Anweisungen v-if und v-show steuern.

2. berechnetes Attribut

Wenn wir das Anzeigen und Ausblenden bestimmter Elemente basierend auf dem Status von Datenattributen dynamisch steuern müssen, ist das berechnete Attribut eine gute Wahl. Berechnete Eigenschaften sind in Vue berechnete Eigenschaften. Sie werden nur dann neu berechnet, wenn sich die Dateneigenschaften, von denen sie abhängen, ändern. Mit dem berechneten Attribut können wir die Logik berechnen, die das Anzeigen und Ausblenden von Elementen steuert.

Das Folgende ist ein Beispiel für die Verwendung des berechneten Attributs:

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showTextComputed">这里是需要显示的文本。</p>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  computed: {
    showTextComputed() {
      // 根据数据状态来计算是否显示元素
      return this.showText ? true : false
    },
  },
  methods: {
    toggleShowText() {
      // 切换showText的数据状态
      this.showText = !this.showText
    },
  },
}
</script>

In diesem Beispiel deklarieren wir ein berechnetes Attribut showTextComputed, um den angezeigten und ausgeblendeten Zustand des Elements zu berechnen. Durch Ändern des Werts von showText mithilfe der toggleShowText-Methode können wir die Berechnungsergebnisse des berechneten Attributs dynamisch steuern.

3. Slot

Vues Slot-Mechanismus ermöglicht es untergeordneten Komponenten, Inhalte in übergeordnete Komponenten einzufügen. Durch die Verwendung von Slots können Sie benutzerdefinierte HTML-Inhalte und -Stile für untergeordnete Komponenten in der übergeordneten Komponente bereitstellen. Über den Slot-Mechanismus können wir Daten ausblenden und anzeigen.

Das Folgende ist ein Beispiel für die Verwendung eines Slots zum Ausblenden und Anzeigen von Inhalten:

<template>
  <div>
    <content v-if="showText">
      <p>这里是需要隐藏的文本。</p>
    </content>
    <content v-show="showText">
      <p>这里是需要显示的文本。</p>
    </content>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  methods: {
    toggleShowText() {
      this.showText = !this.showText
    },
  },
}
</script>

In diesem Beispiel verwenden wir das Inhalts-Tag als Slot und zeigen den entsprechenden Inhalt basierend auf dem Datenstatus an. Mit der Methode toggleShowText können wir den Datenstatus dynamisch ändern, um das Anzeigen und Ausblenden von Inhalten zu steuern.

Zusammenfassung

Hier sind drei verschiedene Möglichkeiten, Daten auszublenden und anzuzeigen. Bedingtes Rendern ist die gebräuchlichste Verarbeitungsmethode, mit der DOM-Elemente basierend auf dem Datenstatus gerendert und gelöscht werden können. Das berechnete Attribut eignet sich für Situationen, in denen der Zustand der Daten berechnet werden muss. Der Slot-Mechanismus eignet sich für Situationen, in denen Sie benutzerdefinierte Stile und HTML-Inhalte für untergeordnete Komponenten bereitstellen müssen. In der Vue-Entwicklung können wir je nach Bedarf flexibel eine Methode auswählen, die zu uns passt, um Daten auszublenden und anzuzeigen.

Das obige ist der detaillierte Inhalt vonVue-Datenanzeige ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!