Einführung in berechnete Eigenschaften in Vue

1. Was ist eine berechnete Eigenschaft?

Ausdrücke in Vorlagen sind sehr praktisch, sie sind jedoch in erster Linie für einfache Berechnungen gedacht. Wenn Sie zu viel Logik in eine Vorlage packen, kann diese unhandlich und schwer zu pflegen werden.

Zum Beispiel:

<div id="app">
  {
<!-- -->{ message.split('').reverse().join('') }}
</div>

An diesem Punkt ist die Vorlage nicht mehr nur eine einfache deklarative Logik. Kehren Sie stattdessen die Zeichenfolge im Interpolationsausdruck direkt um. Wenn Sie die umgekehrte Zeichenfolge an mehreren Stellen verwenden, ist es mühsam, sie auf diese Weise zu schreiben und den Verbrauch zu erhöhen. Sie sollten daher für jede komplexe Logik berechnete Eigenschaften verwenden.

2. Syntax der berechneten Eigenschaften

berechnet{

function () {return //Muss einen Wert zurückgeben. }Normalerweise ist diese Funktion eine Get-Funktion}

3. Beispiele

Für das obige Beispiel können wir schreiben:

<div id="app">
        <p>Ursprüngliche Zeichenfolge: {
<!-- -->{mes}}</p>
        <p>Umgekehrte Zeichenfolge: {
<!-- -->{reverseMes}}</p>
    </div>

lass vm = neues Vue({
            el:'#app',
            Daten:{
                mes:'saghallo'
            },
            berechnet: {
                reverseMes(){
        // Das berechnete Attribut muss einen Rückgabewert haben return this.mes.split('').reverse().join('')
                }
            }
        })

Sehen Sie sich die Ergebnisse an:

Hier definieren wir eine Funktion in computed Eigenschaft der vue Instanz. Der Rückgabewert der Funktion ist das von uns benötigte Ergebnis, das direkt im Interpolationsausdruck aufgerufen und gerendert werden kann.

Beispielsweise wird bei der Berechnung der Eigenschaft der erste Buchstabe des Wortes groß geschrieben:

<div id="app">
        <p>Ursprüngliche Zeichenfolge: {
<!-- -->{name}}</p>
        <p>Den ersten Buchstaben groß schreiben: {
<!-- -->{toUpperCase}}</p>
    </div>

Passen Sie in der computed Eigenschaft der Vue-Instanz unsere berechnete Eigenschaft an, indem Sie das erste Zeichen der Zeichenfolge abrufen, in Großbuchstaben umwandeln und es dann nach der Aufteilung mit den verbleibenden Zeichen verketten:

el:"#app",
            Daten:{
                Name: 'Tom'
            },

            // Berechnete Eigenschaften berechnet:{
            // Benutzerdefinierte berechnete Eigenschaft toUpperCase(){
                gibt diesen.Namen.charAt(0).toUpperCase().concat(diesen.Namen.slice(1,3)) zurück
              }
            }

Die Ausgabe ist:

Es gibt zwei sehr praktische Tipps für berechnete Eigenschaften, die leicht übersehen werden: Erstens können berechnete Eigenschaften von anderen berechneten Eigenschaften abhängen. Zweitens können berechnete Eigenschaften nicht nur von den Daten der aktuellen Vue-Instanz, sondern auch von den Daten anderer Instanzen abhängen.

Zum Beispiel:

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
lass vm1 = neues Vue({
            el:'#app1',
            Daten:{
                mes:'hallo'
            }
        })

        lass vm2 = neues Vue({
            el:'#app2',
            berechnet: {
                reverseMes(){
                    // Verwende die mes im Rechenzentrum der Instanz vm1, um die Zeichenfolge umzukehren return vm1.mes.split('').reverse().join('')
                }
            }
        })

Sehen Sie sich die Ergebnisse an:

Die Daten in den Instanzen vm1 und vm2 können auch zur Berechnung der Eigenschaften verwendet werden

Zusätzlich zur Verwendung in Interpolationsausdrücken können benutzerdefinierte berechnete Eigenschaften auch in v-bind : Attributbindung verwendet werden, um einige Stiländerungen usw. durchzuführen.

Dies ist das Ende dieses Artikels über die Einführung berechneter Eigenschaften in Vue. Weitere relevante Inhalte zu berechneten Eigenschaften in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!