So verwenden Sie den Vue-Filter zum Filtern der Menge

Vue.js ist ein schnelles, flexibles JavaScript-Framework und die erste Wahl für die Erstellung moderner Webanwendungen. In Vue.js können wir wiederverwendbare Komponenten erstellen, das DOM bei Bedarf aktualisieren und einfach Filter hinzufügen, um verschiedene Daten zu verarbeiten. In diesem Artikel besprechen wir, wie man Beträge mithilfe von Vue-Filtern filtert.

Vue.js-Filter bieten eine einfache Möglichkeit, die Textformatierung zu manipulieren. Mit Vuejs können wir Daten bei der Anzeige automatisch filtern und in dem vom Benutzer gewünschten Format anzeigen, beispielsweise im Währungsformat. Die Verwendung von Filtern kann unseren Code einfacher und sauberer machen und uns dabei helfen, Codeduplizierungen zu reduzieren.

Filter sind Teil der Vue.js-Instanz und können in Vorlagen verwendet werden. Die Verwendung von Filtern in Vue.js-Vorlagen ist einfach. Verwenden Sie einfach das Pipe-Symbol (|) in der Vorlage, um die Daten an die Filterfunktion weiterzuleiten. Hier ist ein einfaches Beispiel für die Verwendung des Währungsfilters:

<template>
  <div>
    <p>原始金额：{{ amount }}</p>
    <p>格式化后的金额：{{ amount | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
  },
}
</script>

Im obigen Code haben wir eine Komponente definiert und eine Variable namens Betrag deklariert. Wir übergeben den Wert der Betragsvariablen an eine Filterfunktion namens „currency“ und verwenden die toFixed()-Methode, um ihn auf zwei Dezimalstellen zu beschränken und ihm ein Dollarzeichen voranzustellen.

Wenn die Komponente instanziiert wird, erkennt Vue.js automatisch die Währungsfunktion und registriert sie als Filter. Wenn wir es in einer Vorlage verwenden, können wir den Betrag an den Währungsfilter weiterleiten und dann wird der Betrag in formatierter Form auf der Seite angezeigt.

Vue.js-Filter werden mit dem Pipe-Zeichen ( | ) aufgerufen. Wir können mehrere Filter für dasselbe Element verwenden, zum Beispiel:

<p>{{ amount | currency | capitalize }}</p>

Im obigen Code wendet Vue.js die Währungs- und Großschreibungsfilter der Reihe nach an und rendert dann die Ergebnisse auf der Seite.

Das Definieren von Filtern in Vue.js ist sehr einfach. Wir müssen lediglich ein Filterobjekt in der Komponente deklarieren und ihm die Filterfunktion hinzufügen. Zum Beispiel:

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
  },
}
</script>

Wie oben erwähnt, haben wir ein Objekt namens Filter deklariert und ihm zwei Filterfunktionen hinzugefügt: Währung und Großschreibung. In der Vorlage können wir diese Filter nacheinander verwenden, um die formatierten Daten darzustellen.

Zusammenfassung:

Vue.js-Filter bieten eine einfache Möglichkeit, die Textformatierung zu manipulieren. Filter können uns helfen, bessere Daten anzuzeigen und gleichzeitig unseren Code prägnanter und lesbarer zu machen. Das Definieren von Filtern in Vue.js ist sehr einfach. Wir müssen lediglich ein Filterobjekt in der Komponente deklarieren und ihm die Filterfunktion hinzufügen. Die Verwendung von Filtern kann unseren Code einfacher und sauberer machen und uns dabei helfen, Codeduplizierungen zu reduzieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Vue-Filter zum Filtern der Menge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!