Detaillierte Erläuterung des VUE-Array-Updates
In diesem Artikel wird hauptsächlich das Problem der VUE-Array-Aktualisierung vorgestellt. Freunde, die es benötigen, können darauf verweisen.
1. Klassifizierung der Datenmethode:
(1) Ursprüngliche Array-Änderung
Push
Pop
unshift
shift
reverse
sort
splice
(2) Das ursprüngliche Array bleibt unverändert und ein neues Array wird generiert
slice
concat
Filter
Für Methoden, die das ursprüngliche Array ändern, können Sie die Ansicht direkt aktualisieren.
Bei Methoden, bei denen das ursprüngliche Array unverändert bleibt, können Sie das ursprüngliche Array durch ein neues Array ersetzen, um die Ansicht zu ändern.
Beispielcode:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
//直接可以使得视图改变
//app.books.push({name: 'c++',author: 'd'});
//需要更新原数组
app.books = app.books.concat([{name: 'c++',author: 'd'}]);
</script>
</body>
</html>Hinweis: Folgendes löst keine Aktualisierung der Ansicht aus.
(1) Elemente direkt nach Index festlegen.
(2) Ändern Sie die Array-Länge, app.books.length=1.
Wenn Sie das ursprüngliche Array nicht ändern möchten, können Sie berechnete Eigenschaften verwenden, um das Array zu filtern, wie zum Beispiel:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级111',
author: 'b'
},
{
name: 'java33333',
author: 'c'
}
]
},
computed:{
filterBooks:function(){
return this.books.sort(function(a,b){
return a.name.length>b.name.length?1:-1
})
}
}
});
</script>
</body>
</html>Wie hört Vue zu? Was ist mit Datenänderungen?
1) So verfolgen Sie Änderungen
Jede Komponenteninstanz verfügt über ein entsprechendes Watcher-Instanzobjekt, das die Eigenschaften während des Komponentenrenderingprozesses als Abhängigkeiten aufzeichnet Wenn der Setter aufgerufen wird, wird der Watcher zur Neuberechnung aufgefordert, wodurch die zugehörigen Komponenten aktualisiert werden.
2) Probleme bei der Änderungserkennung
Aufgrund der Einschränkungen von modernem JavaScript (und der Ablehnung von Object.observe) kann Vue das Hinzufügen oder Löschen von Objekteigenschaften nicht erkennen. Da Vue bei der Initialisierung der Instanz den Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie konvertieren kann, damit sie reagiert. Beispiel:
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的Vue erlaubt kein dynamisches Hinzufügen neuer reaktiver Eigenschaften auf Stammebene zu bereits erstellten Instanzen. Es kann jedoch die Methode Vue.set(object, key, value) verwenden, um Antworteigenschaften zu verschachtelten Objekten hinzuzufügen:
Vue.set(vm.someObject, 'b', 2)
Sie können auch vm.$ set verwenden Instanzmethode, die auch ein Alias der globalen Vue.set-Methode ist,
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des VUE-Array-Updates. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1207
24
Windows kann nicht auf das angegebene Gerät, den angegebenen Pfad oder die angegebene Datei zugreifen
Jun 18, 2024 pm 04:49 PM
Der Computer eines Freundes weist einen solchen Fehler auf. Beim Öffnen von „Dieser PC“ und der Datei auf Laufwerk C wird die Meldung „Explorer.EXE“ angezeigt. Windows kann nicht auf das angegebene Gerät, den angegebenen Pfad oder die angegebene Datei zugreifen. Möglicherweise verfügen Sie nicht über die entsprechenden Berechtigungen, um auf das Projekt zuzugreifen. " Einschließlich Ordner, Dateien, Dieser Computer, Papierkorb usw. wird durch Doppelklicken ein solches Fenster geöffnet, es ist jedoch normal, es durch Klicken mit der rechten Maustaste zu öffnen. Dies wird durch ein Systemupdate verursacht. Wenn Sie ebenfalls auf diese Situation stoßen, erfahren Sie im folgenden Editor, wie Sie das Problem lösen können. 1. Öffnen Sie den Registrierungseditor Win+R und geben Sie regedit ein, oder klicken Sie zum Ausführen mit der rechten Maustaste auf das Startmenü und geben Sie regedit ein. 2. Suchen Sie die Registrierung „Computer\HKEY_CLASSES_ROOT\PackagedCom\ClassInd“;
Wie entferne ich doppelte Elemente mithilfe einer foreach-Schleife aus einem PHP-Array?
Apr 27, 2024 am 11:33 AM
Die Methode zur Verwendung einer foreach-Schleife zum Entfernen doppelter Elemente aus einem PHP-Array ist wie folgt: Durchlaufen Sie das Array und löschen Sie es, wenn das Element bereits vorhanden ist und die aktuelle Position nicht das erste Vorkommen ist. Wenn beispielsweise in den Datenbankabfrageergebnissen doppelte Datensätze vorhanden sind, können Sie diese Methode verwenden, um diese zu entfernen und Ergebnisse ohne doppelte Datensätze zu erhalten.
Windows pausiert Updates dauerhaft, Windows schaltet automatische Updates aus
Jun 18, 2024 pm 07:04 PM
Windows-Updates können einige der folgenden Probleme verursachen: 1. Kompatibilitätsprobleme: Einige Anwendungen, Treiber oder Hardwaregeräte sind möglicherweise nicht mit neuen Windows-Updates kompatibel, was dazu führen kann, dass sie nicht ordnungsgemäß funktionieren oder abstürzen. 2. Leistungsprobleme: Manchmal können Windows-Updates dazu führen, dass das System langsamer wird oder es zu Leistungseinbußen kommt. Dies kann auf neue Funktionen oder Verbesserungen zurückzuführen sein, die mehr Ressourcen zur Ausführung erfordern. 3. Probleme mit der Systemstabilität: Einige Benutzer berichteten, dass es nach der Installation von Windows-Updates zu unerwarteten Abstürzen oder Bluescreen-Fehlern kommen kann. 4. Datenverlust: In seltenen Fällen können Windows-Updates zu Datenverlust oder Dateibeschädigung führen. Aus diesem Grund sollten Sie vor der Durchführung wichtiger Aktualisierungen eine Sicherungskopie Ihres Computers erstellen
Die Kunst des PHP Array Deep Copy: Mit verschiedenen Methoden eine perfekte Kopie erzielen
May 01, 2024 pm 12:30 PM
Zu den Methoden zum tiefen Kopieren von Arrays in PHP gehören: JSON-Kodierung und -Dekodierung mit json_decode und json_encode. Verwenden Sie array_map und clone, um tiefe Kopien von Schlüsseln und Werten zu erstellen. Verwenden Sie Serialize und Deserialize für die Serialisierung und Deserialisierung.
PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden
May 03, 2024 pm 09:03 PM
Der Leistungsvergleich der PHP-Methoden zum Umdrehen von Array-Schlüsselwerten zeigt, dass die Funktion array_flip() in großen Arrays (mehr als 1 Million Elemente) eine bessere Leistung als die for-Schleife erbringt und weniger Zeit benötigt. Die for-Schleifenmethode zum manuellen Umdrehen von Schlüsselwerten dauert relativ lange.
Best Practices für Deep Copying von PHP-Arrays: Entdecken Sie effiziente Methoden
Apr 30, 2024 pm 03:42 PM
Die beste Vorgehensweise zum Durchführen einer Array-Deep-Kopie in PHP besteht darin, json_decode(json_encode($arr)) zu verwenden, um das Array in einen JSON-String zu konvertieren und ihn dann wieder in ein Array umzuwandeln. Verwenden Sie unserialize(serialize($arr)), um das Array in eine Zeichenfolge zu serialisieren und es dann in ein neues Array zu deserialisieren. Verwenden Sie den RecursiveIteratorIterator, um mehrdimensionale Arrays rekursiv zu durchlaufen.
Praxis der mehrdimensionalen Sortierung von PHP-Arrays: von einfachen bis hin zu komplexen Szenarien
Apr 29, 2024 pm 09:12 PM
Die mehrdimensionale Array-Sortierung kann in Einzelspaltensortierung und verschachtelte Sortierung unterteilt werden. Bei der Einzelspaltensortierung kann die Funktion array_multisort() zum Sortieren nach Spalten verwendet werden. Bei der verschachtelten Sortierung ist eine rekursive Funktion erforderlich, um das Array zu durchlaufen und zu sortieren. Zu den praktischen Beispielen gehören die Sortierung nach Produktname und die Sortierung von Verbindungen nach Verkaufsmenge und Preis.
Anwendung der PHP-Array-Gruppierungsfunktion bei der Datensortierung
May 04, 2024 pm 01:03 PM
Die PHP-Funktion array_group_by kann Elemente in einem Array basierend auf Schlüsseln oder Abschlussfunktionen gruppieren und ein assoziatives Array zurückgeben, wobei der Schlüssel der Gruppenname und der Wert ein Array von Elementen ist, die zur Gruppe gehören.
