So verwenden Sie von Vue berechnete Eigenschaften richtig
Dieses Mal zeige ich Ihnen, wie Sie von Vue berechnete Eigenschaften korrekt verwenden und welche Vorsichtsmaßnahmen für die korrekte Verwendung von von Vue berechneten Eigenschaften gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.
1. Was ist ein berechnetes Attribut
Die Ausdrücke in Vorlagen sind sehr praktisch, aber ursprünglich für einfache Operationen konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel:
<p id="example">
{{ message.split('').reverse().join('') }}
</p>Der Ausdruck hier enthält 3 Operationen, was nicht sehr klar ist. Wenn Sie also auf komplexe Logik stoßen, sollten Sie das spezielle berechnete Attribut berechnet von Vue verwenden, um damit umzugehen.
2. Verwendung berechneter Attribute
Verschiedene komplexe Logiken können in einem berechneten Attribut vervollständigt werden, einschließlich Operationen, Funktionsaufrufen usw. As solange am Ende ein Ergebnis zurückgegeben wird.
Lassen Sie uns das obige Beispiel mit berechneten Eigenschaften umschreiben
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});Das Ergebnis:
Ursprüngliche Nachricht: „Hallo“
Berechnete umgekehrte Nachricht : "olleH"
Zusätzlich zur einfachen Verwendung im obigen Beispiel können berechnete Eigenschaften auch auf den Daten mehrerer Vue-Instanzen basieren. Solange sich eine der Daten ändert, ändern sich die berechneten Eigenschaften Die Ansicht wird ebenfalls aktualisiert.
<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p>
</body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
}
}
});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 auf den Daten der aktuellen Vue-Instanz basieren , aber auch Daten anderer Instanzen, zum Beispiel:
<p id="app1"></p>
<p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});
var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
}
}
});Jede berechnete Eigenschaft enthält einen Getter und einen Setter. Unsere beiden obigen Beispiele sind die Standardverwendung berechneter Eigenschaften, bei denen nur Getter zum Lesen verwendet werden.
Bei Bedarf können Sie auch eine Setter-Funktion bereitstellen. Wenn Sie den Wert einer berechneten Eigenschaft manuell ändern, genau wie beim Ändern gewöhnlicher Daten, wird die Setter-Funktion ausgelöst, um einige benutzerdefinierte Vorgänge auszuführen, wie zum Beispiel:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。In den meisten Fällen verwenden wir nur die Standard-Getter-Methode zum Lesen einer berechneten Eigenschaft. Setter werden in Unternehmen selten verwendet. Wenn Sie also eine berechnete Eigenschaft deklarieren, können Sie die Standardmethode direkt verwenden Beim Schreiben ist es nicht notwendig, sowohl den Getter als auch den Setter zu deklarieren.
3. Zwischenspeicherung berechneter Attribute
Im obigen Beispiel können wir zusätzlich zur Verwendung berechneter Attribute auch Methoden in Ausdrücken aufrufen Erzielen Sie den gleichen Effekt, wie zum Beispiel:
<p>{{reverseTitle()}}</p>
// 在组件中
methods: {
reverseTitle: function () {
return this.title.split('').reverse().join('')
}
} Wir können dieselbe Funktion als Methode anstelle einer berechneten Eigenschaft definieren, und das Endergebnis der beiden Methoden ist tatsächlich genau das gleiche. Nur einer verwendet reverseTitle(), um den Wert abzurufen, und der andere verwendet reverseTitle, um den Wert abzurufen.
Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden. Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern.
Das bedeutet, dass, solange sich der Titel nicht geändert hat, bei mehrmaligem Zugriff auf die berechnete Eigenschaft „reverseTitle“ sofort das vorherige Berechnungsergebnis zurückgegeben wird, ohne dass die Funktion erneut ausgeführt werden muss.
Ein kleines Beispiel:
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
computed: {
reverseTitle: function(){
return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
},
reverseTitle1: function(){
return this.title.split('').reverse().join('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},Im Gegensatz dazu führt die aufrufende Methode die Funktion immer dann erneut aus, wenn ein erneutes Rendern ausgelöst wird.
Warum brauchen wir Caching? Angenommen, wir haben eine rechenintensive Eigenschaft A, die das Durchlaufen eines riesigen Arrays und die Durchführung vieler Berechnungen erfordert. Dann haben wir möglicherweise andere berechnete Eigenschaften, die von A abhängen.
Ohne Caching werden wir den Getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.
Werfen wir einen Blick auf die Verwendung der von Vue berechneten Eigenschaften
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/Vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data: {
a: 1,
},
computed:{
b:function(){
return this.a+1;
}
}
});
console.log(vm.a);
}
</script>
</head>
<body>
<p id="box">
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/Vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data: {
a: 1,
},
computed:{
b:function(){
return this.a+1;
}
}
});
document.onclick = function(){
vm.a = 101;
}
}
</script>
</head>
<body>
<p id="box">
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/Vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data: {
a: 1,
},
computed:{
b:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
});
document.onclick = function(){
vm.b = 10;
}
}
</script>
</head>
<body>
<p id="box">
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Schauen Sie sich diesen Artikel an, um weitere spannende Informationen zu erhalten. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung der JS-Datums- und Zeitauswahl
Detaillierte Erläuterung der Timeout-Verarbeitung von Vue Axios-Anfragen (mit Code)
Das obige ist der detaillierte Inhalt vonSo verwenden Sie von Vue berechnete Eigenschaften richtig. 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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1386
52
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark ist ein kleines HDD-Benchmark-Tool für Festplatten, das schnell sequentielle und zufällige Lese-/Schreibgeschwindigkeiten misst. Lassen Sie sich als Nächstes vom Redakteur CrystalDiskMark und die Verwendung von CrystalDiskMark vorstellen ). Zufällige I/O-Leistung. Es ist eine kostenlose Windows-Anwendung und bietet eine benutzerfreundliche Oberfläche und verschiedene Testmodi zur Bewertung verschiedener Aspekte der Festplattenleistung. Sie wird häufig in Hardware-Reviews verwendet
CUDAs universelle Matrixmultiplikation: vom Einstieg bis zur Kompetenz!
Mar 25, 2024 pm 12:30 PM
Die allgemeine Matrixmultiplikation (GEMM) ist ein wesentlicher Bestandteil vieler Anwendungen und Algorithmen und außerdem einer der wichtigen Indikatoren zur Bewertung der Leistung der Computerhardware. Eingehende Forschung und Optimierung der Implementierung von GEMM können uns helfen, Hochleistungsrechnen und die Beziehung zwischen Software- und Hardwaresystemen besser zu verstehen. In der Informatik kann eine effektive Optimierung von GEMM die Rechengeschwindigkeit erhöhen und Ressourcen einsparen, was für die Verbesserung der Gesamtleistung eines Computersystems von entscheidender Bedeutung ist. Ein tiefgreifendes Verständnis des Funktionsprinzips und der Optimierungsmethode von GEMM wird uns helfen, das Potenzial moderner Computerhardware besser zu nutzen und effizientere Lösungen für verschiedene komplexe Computeraufgaben bereitzustellen. Durch Optimierung der Leistung von GEMM
So berechnen Sie Addition, Subtraktion, Multiplikation und Division in einem Word-Dokument
Mar 19, 2024 pm 08:13 PM
WORD ist ein leistungsstarkes Textverarbeitungsprogramm, mit dem wir verschiedene Texte in Excel bearbeiten können. Wir beherrschen die Berechnungsmethoden der Addition, Subtraktion und Multiplikatoren. Wie subtrahiere ich den Multiplikator? Kann ich ihn nur mit einem Taschenrechner berechnen? Die Antwort ist natürlich nein, WORD kann das auch. Heute werde ich Ihnen beibringen, wie Sie mit Formeln grundlegende Operationen wie Addition, Subtraktion, Multiplikation und Division in Tabellen in Word-Dokumenten berechnen. Lassen Sie mich heute im Detail zeigen, wie man Addition, Subtraktion, Multiplikation und Division in einem WORD-Dokument berechnet. Schritt 1: Öffnen Sie ein WORD, klicken Sie in der Symbolleiste unter [Einfügen] auf [Tabelle] und fügen Sie eine Tabelle in das Dropdown-Menü ein.
Mar 18, 2024 am 10:58 AM
foobar2000 ist eine Software, die Ihnen jederzeit Musik aller Art mit verlustfreier Klangqualität bietet Spielen Sie das erweiterte Audio auf dem Computer ab, um ein bequemeres und effizienteres Musikwiedergabeerlebnis zu ermöglichen. Das Interface-Design ist einfach, klar und benutzerfreundlich. Es nimmt einen minimalistischen Designstil an, ohne übermäßige Dekoration Es unterstützt außerdem eine Vielzahl von Skins und Themes, personalisiert Einstellungen nach Ihren eigenen Vorlieben und erstellt einen exklusiven Musikplayer, der die Wiedergabe mehrerer Audioformate unterstützt. Außerdem unterstützt es die Audio-Gain-Funktion zum Anpassen der Lautstärke Passen Sie die Lautstärke entsprechend Ihrem Hörzustand an, um Hörschäden durch zu hohe Lautstärke zu vermeiden. Als nächstes lass mich dir helfen
So verwenden Sie NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox ist eine von chinesischen Internetnutzern weit verbreitete E-Mail-Adresse und hat mit seinen stabilen und effizienten Diensten schon immer das Vertrauen der Benutzer gewonnen. NetEase Mailbox Master ist eine E-Mail-Software, die speziell für Mobiltelefonbenutzer entwickelt wurde. Sie vereinfacht das Senden und Empfangen von E-Mails erheblich und macht unsere E-Mail-Verarbeitung komfortabler. Wie Sie NetEase Mailbox Master verwenden und welche spezifischen Funktionen es bietet, wird Ihnen der Herausgeber dieser Website im Folgenden ausführlich vorstellen und hofft, Ihnen weiterzuhelfen! Zunächst können Sie die NetEase Mailbox Master-App im Mobile App Store suchen und herunterladen. Suchen Sie im App Store oder im Baidu Mobile Assistant nach „NetEase Mailbox Master“ und befolgen Sie dann die Anweisungen zur Installation. Nachdem der Download und die Installation abgeschlossen sind, öffnen wir das NetEase-E-Mail-Konto und melden uns an. Die Anmeldeschnittstelle ist wie unten dargestellt
So verwenden Sie die Baidu Netdisk-App
Mar 27, 2024 pm 06:46 PM
Cloud-Speicher sind heutzutage aus unserem täglichen Leben und Arbeiten nicht mehr wegzudenken. Als einer der führenden Cloud-Speicherdienste in China hat Baidu Netdisk mit seinen leistungsstarken Speicherfunktionen, der effizienten Übertragungsgeschwindigkeit und dem komfortablen Bedienerlebnis die Gunst einer großen Anzahl von Benutzern gewonnen. Und egal, ob Sie wichtige Dateien sichern, Informationen teilen, Videos online ansehen oder Musik hören möchten, Baidu Cloud Disk kann Ihre Anforderungen erfüllen. Viele Benutzer verstehen jedoch möglicherweise nicht die spezifische Verwendung der Baidu Netdisk-App. Dieses Tutorial führt Sie daher im Detail in die Verwendung der Baidu Netdisk-App ein. Wenn Sie immer noch verwirrt sind, folgen Sie bitte diesem Artikel, um mehr im Detail zu erfahren. So verwenden Sie Baidu Cloud Network Disk: 1. Installation Wählen Sie beim Herunterladen und Installieren der Baidu Cloud-Software zunächst die benutzerdefinierte Installationsoption aus.
BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?
Apr 26, 2024 am 09:40 AM
MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden
Erfahren Sie, wie Sie die neuen erweiterten Funktionen von iOS 17.4 „Schutz vor gestohlenen Geräten' nutzen.
Mar 10, 2024 pm 04:34 PM
Apple hat am Dienstag das iOS 17.4-Update veröffentlicht, das eine Reihe neuer Funktionen und Korrekturen für iPhones bringt. Das Update enthält neue Emojis und EU-Nutzer können diese auch aus anderen App-Stores herunterladen. Darüber hinaus stärkt das Update auch die Kontrolle der iPhone-Sicherheit und führt weitere Einstellungsoptionen für den „Schutz gestohlener Geräte“ ein, um Benutzern mehr Auswahl und Schutz zu bieten. „iOS17.3 führt zum ersten Mal die Funktion „Schutz vor gestohlenen Geräten“ ein, die den vertraulichen Informationen der Benutzer zusätzliche Sicherheit verleiht. Wenn der Benutzer nicht zu Hause oder an anderen vertrauten Orten ist, erfordert diese Funktion, dass der Benutzer zum ersten Mal biometrische Informationen eingibt Zeit und nach einer Stunde müssen Sie Informationen erneut eingeben, um auf bestimmte Daten zuzugreifen und diese zu ändern, z. B. um Ihr Apple-ID-Passwort zu ändern oder den Schutz vor gestohlenen Geräten zu deaktivieren.
