vue versteckten Zustand

Da die Frontend-Entwicklung immer ausgereifter und komplexer wird, gibt es immer mehr Probleme, an die wir Entwickler uns anpassen und die wir lösen müssen. Unter anderem ist die Optimierung der Seitenanzeigelogik ein Aspekt, auf den wir achten müssen. Um die Effizienz des Seitenrenderings und das interaktive Erlebnis zu optimieren, bietet Vue eine sehr praktische Funktion: den versteckten Status.

Was ist ein verborgener Zustand?

Lassen Sie uns zunächst kurz verstehen, was der verborgene Zustand von Vue ist. Es verbirgt oder zeigt tatsächlich den Inhalt einer Komponente an, indem es das Anzeigeattribut des Dom-Elements steuert. Wenn wir beispielsweise unter bestimmten Bedingungen einen bestimmten Bereich ausblenden müssen, können wir so schreiben:

<template>
  <div>
    <div class="info" v-show="isShow">
      <!-- 这里是一些信息内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true // 控制显示或隐藏
    }
  }
}
</script>

Im obigen Code haben wir die Vue-Anweisung „v-show“ verwendet und sie an eine Variable isShow gebunden. Wenn der Wert von isShow true ist, wird der Bereichsinhalt angezeigt; wenn der Wert von isShow false ist, wird der Bereichsinhalt ausgeblendet.

Der Unterschied zwischen

und v-if

Wir haben bereits erwähnt, dass das Dom-Element in v-show durch Ändern des Anzeigeattributs ausgeblendet oder angezeigt wird. Was ist also der Unterschied zwischen v-if und v-show?

Zunächst wird v-if ausgeführt, wenn die Komponente gerendert werden muss, während v-show lediglich das Anzeigeattribut ändert und unabhängig davon ausgeführt wird, ob die Komponente gerendert werden muss. Wenn Komponenten daher häufig die Anzeige wechseln müssen, ist die Verwendung von V-Show zur Optimierung der Leistung besser.

Zweitens werden die Ausdrücke von v-if und v-show etwas anders geschrieben. Auf v-if folgt ein Ausdruck, und die Komponente wird nur gerendert, wenn der Ausdruck wahr ist. Wenn er wahr ist, wird die Komponente angezeigt, und wenn er falsch ist, wird die Komponente angezeigt ist versteckt.

Darüber hinaus löscht v-if die Komponente vollständig aus dem Dom-Baum und v-show setzt das Anzeigeattribut der Komponente auf „Keine“. Daher kann v-if bei häufigem Wechsel zu Leistungsproblemen beim Neuzeichnen von Dom führen.

Es ist zu beachten, dass die gleichzeitige Verwendung von v-if und v-show nicht empfohlen wird, sondern eine davon basierend auf den tatsächlichen Anforderungen ausgewählt werden sollte.

Anwendungsszenarien

Vue Hidden State kann auf viele Szenarien angewendet werden. Im Folgenden sind einige gängige Anwendungsszenarien aufgeführt.

Wenn der Benutzer nicht angemeldet ist, müssen wir einige Inhalte ausblenden, die nur angemeldete Benutzer sehen können. Zu diesem Zeitpunkt können Sie den verborgenen Status von Vue verwenden, um einfach Folgendes zu implementieren:

2. <template>
     <div>
       <div v-show="isLogin">
         <!-- 需要登录后才能查看的内容 -->
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isLogin: false // 默认未登录
       }
     },
     created() {
       // 模拟登录，修改isLogin值
       this.isLogin = true;
     }
   }
   </script>

   Nach dem Login kopieren

Wenn die Tabellendaten groß sind, möchten wir nicht alle Daten auf einmal anzeigen, sondern müssen sie anzeigen Seiten. Zu diesem Zeitpunkt können Sie den verborgenen Status von Vue verwenden, um die Paging-Anzeige zu implementieren:

<template>
  <div>
    <div v-for="(item, index) in data" :key="index" v-show="(index+1) > (currentPage-1)*pageSize && (index+1) <= currentPage*pageSize">
      <!-- 表格展示内容 -->
    </div>
    <div>
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  created() {
    // 获取表格数据，赋值给data
  }
}
</script>

Wenn viele Tabellendaten vorhanden sind, müssen wir nur die Daten auf der aktuellen Seite anzeigen und andere Daten ausblenden.

Zusammenfassung

Das obige ist der detaillierte Inhalt vonvue versteckten Zustand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!