v-if-Syntax, @blur-Direktive und wie man Daten lokal in Vue speichert

In Vue kann die v-if-Direktive verwendet werden, um Elemente basierend auf dem wahren oder falschen Wert eines Ausdrucks bedingt darzustellen.

Verwenden Sie beispielsweise die v-if-Direktive, um zu bestimmen, ob ein Element basierend auf Bedingungen in den Daten angezeigt werden soll:

<div v-if="showElement">
  这是一个需要根据条件显示的元素。
</div>

Wenn im obigen Code der Wert des showElement-Attributs in den Daten wahr ist, dann

Das Element wird gerendert; andernfalls, wenn der Wert von showElement falsch ist, dann

Das Element wird nicht gerendert.

Zusätzlich zur v-if-Direktive verfügt Vue über weitere Direktiven, die zum bedingten Rendern von Elementen verwendet werden können, z. B. v-else und v-else-if. Mithilfe dieser Anweisungen können wir das Ein- und Ausblenden von Seitenelementen flexibler steuern.

In Vue wird die @blur-Direktive verwendet, um auf Elemente zu warten, die den Fokus verlieren. Es ist syntaktischer Zucker, äquivalent zu v-on:blur.

Im folgenden Code wird beispielsweise die Methode handleBlur aufgerufen, wenn das Eingabefeld den Fokus verliert:

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleBlur() {
      
      
      console.log('input失去焦点了');
    }
  }
}
</script>

Im obigen Code verwenden wir die @blur-Direktive für das Element und die handleBlur-Methode wird automatisch aufgerufen, wenn das Fokusverlustereignis ausgelöst wird.

Zusätzlich zur @blur-Direktive bietet Vue auch viele andere Anweisungen und Ereignisbindungsmethoden, die uns dabei helfen können, Benutzereingaben und -interaktionen bequemer zu verarbeiten und dadurch die Entwicklung effizienter zu gestalten.

Im Frontend können wir über den bereitgestellten Browser localStorageDaten lokal im Browser speichern.

Beispielsweise können wir einen String mit dem Schlüssel „name“ und dem Wert „Tom“ folgendermaßen speichern localStorage:

localStorage.setItem('name', 'Tom');

Natürlich können wir Daten darausgetItem auch über folgende Methoden erhalten:localStorage

const name = localStorage.getItem('name');
console.log(name); // 输出 "Tom"

Wir können sogar Objekte verwenden JSON, um Daten zur Speicherung in Zeichenfolgen umzuwandeln, zum Beispiel:

const person = {
    
    
  name: 'Tom',
  age: 18
};

localStorage.setItem('person', JSON.stringify(person));

Auf diese Weise können wir ein Objekt speichern, das mehrere Attribute enthält localStorage, und JSON.parse()es dann mit Methoden analysieren, wenn es herausgenommen werden muss, zum Beispiel:

const person = JSON.parse(localStorage.getItem('person'));
console.log(person.name); // 输出 "Tom"
console.log(person.age);  // 输出 18

Allerdings ist zu beachten, dass localStoragedie Kapazität begrenzt ist, in der Regel etwa 5-10 MB. Werden zu viele Daten gespeichert, nimmt die Browserleistung ab. Bei der Verwendung von localStorageDatenspeichern müssen Sie sorgfältige Beurteilungen und Entscheidungen treffen, die auf den Geschäftsanforderungen basieren.

v-if-Syntax, @blur-Direktive und wie man Daten lokal in Vue speichert

Guess you like