So zeigen Sie versteckte Daten in Vue an

In Vue können wir Daten über V-IF, V-Show, berechnete Eigenschaften oder Methodenmethoden ausblenden oder anzeigen. Schauen wir uns diese Methoden im Folgenden genauer an.

1. v-if/v-else steuern display

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

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

In diesem Beispiel verwenden wir einen booleschen Typ data isShow, um zu steuern, ob Daten angezeigt oder ausgeblendet werden sollen. Wenn der Wert von isShow wahr ist, werden die anzuzeigenden Daten angezeigt, andernfalls werden sie ausgeblendet.

2. v-show steuert die Anzeige

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

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

Anders als v-if/v-else zeigt v-show Daten an und verbirgt sie durch Steuerung der CSS-Anzeigeeigenschaft. Wenn der Wert von isShow wahr ist, werden die anzuzeigenden Daten angezeigt und das Anzeigeattribut ist der für das Element festgelegte Wert, z. B. standardmäßig „Block“, andernfalls wird es ausgeblendet und das Anzeigeattribut ist „none“.

v-if/v-else und v-show haben unterschiedliche Verwendungsszenarien. v-if/v-else eignet sich für den Einsatz, wenn häufiges Umschalten erforderlich ist, da es nur unter bestimmten Bedingungen verwendet werden kann Der entsprechende Inhalt wird gerendert und dann zerstört und erneut gerendert, wenn die Bedingungen nicht erfüllt sind. v-show eignet sich für die Verwendung, wenn beim ersten Rendern die Anzeige oder das Ausblenden von Daten entsprechend den Bedingungen gesteuert werden muss Steuert einfach die CSS-Anzeigeeigenschaft.

3. Berechnete berechnete Eigenschaften

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

berechnet Berechnete Eigenschaften können einige Werte in der Vorlage dynamisch berechnen und die Berechnungsergebnisse zum Rendern an die Vorlage zurückgeben. Im obigen Beispiel verwenden wir die Message-Methode in der berechneten Eigenschaft, um die anzuzeigenden Daten basierend auf Änderungen im isShow-Wert dynamisch zu ändern.

4. Methoden Methode

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

Methoden können eine Methode in der Vorlage dynamisch aufrufen und den Rückgabewert der Methode zum Rendern an die Vorlage zurückgeben. Im obigen Beispiel haben wir die getMessage-Methode in der Methodenmethode verwendet, um die anzuzeigenden Daten basierend auf Änderungen im isShow-Wert dynamisch zu ändern.

Egal welche Methode verwendet wird, der Schlüssel besteht darin, die geeignete Methode zum Ausblenden oder Anzeigen von Daten entsprechend dem jeweiligen Szenario auszuwählen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie versteckte Daten in Vue an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!