Vue definiert die Array-Methode

Vue.js ist ein sehr beliebtes JavaScript-Framework, das häufig bei der Entwicklung von Single-Page-Anwendungen, beim Schreiben von Komponenten usw. verwendet wird. In Vue.js ist Array eine häufig verwendete Datenstruktur, die uns bei der Handhabung einiger komplexer Datenlogiken helfen kann. Im Folgenden stellen wir die häufig verwendeten Array-Methoden in Vue.js vor.

1. push()

push()-Methode kann ein oder mehrere Elemente zum Array hinzufügen und die neue Array-Länge zurückgeben. Definieren Sie beispielsweise ein Array in Vue.js:

data(){
  return {
    colors: ['red', 'green', 'blue']
  }
}

Wir können die Methode push() verwenden, um dem Array ein neues Element hinzuzufügen:

methods: {
  addColor() {
    this.colors.push('yellow');
  }
}

Hier definieren wir ein Bei der addColor()-Methode wird bei jedem Aufruf dieser Methode ein neues Farbelement („Gelb“) zum Array hinzugefügt.

2. pop()

Die Methode pop() kann das letzte Element aus dem Array entfernen. Definieren Sie beispielsweise ein Array in Vue.js:

data() {
  return {
    fruits: ['apple', 'banana', 'orange']
  }
}

Wir können die Methode pop() verwenden, um das letzte Element im Array zu löschen:

methods: {
  removeFruit() {
    this.fruits.pop();
  }
}

Hier definieren wir a Bei der Methode „removeFruit()“ wird bei jedem Aufruf dieser Methode das letzte Element im Array gelöscht. Die Methode unshift() fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Array-Länge zurück. Definieren Sie beispielsweise ein Array in Vue.js:

data() {
  return {
    numbers: [3, 4, 5]
  }
}

Wir können die Methode unshift() verwenden, um ein neues Element am Anfang des Arrays hinzuzufügen:

3. methods: {
     addNumber() {
       this.numbers.unshift(2);
     }
   }

Here Wir definieren eine addNumber()-Methode, die bei jedem Aufruf dieser Methode eine neue Zahl (2) am Anfang des Arrays hinzufügt.

shift()

Die Methode „shift()“ kann ein Element vom Anfang des Arrays entfernen und den Wert des Elements zurückgeben. Definieren Sie beispielsweise ein Array in Vue.js:

data() {
  return {
    cars: ['BMW', 'Audi', 'Mercedes']
  }
}

Wir können die Methode „shift()“ verwenden, um ein Element vom Anfang des Arrays zu löschen:

4. methods: {
     removeCar() {
       this.cars.shift();
     }
   }

Hier sind wir Definieren Sie eine Methode „removeCar()“. Bei jedem Aufruf dieser Methode wird das erste Element („BMW“) im Array gelöscht. Die Methode „slice()“ kann ein neues Array zurückgeben, das die aus dem ursprünglichen Array ausgewählten Elemente enthält. Definieren Sie beispielsweise ein Array in Vue.js:

data() {
  return {
    animals: ['dog', 'cat', 'lion', 'tiger', 'monkey']
  }
}

Wir können die Methode „slice()“ verwenden, um ein neues Array zurückzugeben, das beim zweiten Element (Index 1) des ursprünglichen Arrays beginnt und am endet viertes Element (Index 3):

computed: {
  selectedAnimals() {
    return this.animals.slice(1, 4);
  }
}

Hier definieren wir ein berechnetes Attribut, das ein neues Array zurückgibt, das die aus dem ursprünglichen Array ausgewählten Elemente enthält („cat“, „lion“ und „tiger“). Die splice()-Methode kann ein oder mehrere Elemente zu einem Array hinzufügen oder daraus entfernen. Definieren Sie beispielsweise ein Array in Vue.js:

data() {
   return {
    cities: ['New York', 'London', 'Paris', 'Tokyo']
  }
}

Wir können die Methode splice() verwenden, um dem Array ein neues Element hinzuzufügen:

methods: {
  addCity() {
    this.cities.splice(2, 0, 'Shanghai');
  }
}

Hier definieren wir ein addCity()-Methode, die zunächst die splice()-Operation ab Index 2 angibt, dann die verbleibenden Elemente nach hinten verschiebt und ein neues Element („Shanghai“) bei Index 2 hinzufügt.
Gleichzeitig können wir auch die Methode splice() verwenden, um ein Element im Array zu löschen:

methods: {
  removeCity() {
    this.cities.splice(1, 1);
  }
}

Hier definieren wir eine Methode „removeCity()“, die startet bei Index 1 Löschen Sie zunächst ein Element („London“).

Fazit:

Die oben genannten sind die häufig verwendeten Array-Methoden in Vue.js. Das Verständnis dieser Methoden kann uns helfen, Vue.js-Anwendungen effizienter zu schreiben. Natürlich gibt es noch viele andere Array-Methoden. Sie können bei Bedarf die Dokumentation selbst überprüfen.

Das obige ist der detaillierte Inhalt vonVue definiert die Array-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!