Analysieren der häufig verwendeten v-Anweisungen in vue.js

Inhaltsverzeichnis

Erklärung des V-Texts bei „if“ für die Modellbindungsanzeige in Vue

v-html:
v-auf
v-wenn
v-für
V-Modell
v-binden
V-Show
Der Unterschied zwischen V-Bind und V-Model

Erklärung des V-Texts bei „if“ für die Modellbindungsanzeige in Vue

v-text: Die InnerText-Eigenschaft des Elements muss ein Doppeltag sein, gefolgt von { { }} hat die gleiche Wirkung. Wird seltener verwendet. Hinweis: v-text kann nur in doppelten Tags verwendet werden.

v-html:

Das innerHTML eines Elements
v-html weist dem innerHTML eines Elements tatsächlich einen Wert zu

v-auf

Tatsächlich können auf v-on nicht nur Klickereignisse, sondern auch andere Ereignisse folgen, und die Verwendung ist ähnlich. Zum Beispiel: v-on:click/mouseout/mouseover/mousedown…

Der folgende Klick ist ein Beispiel

Hinweis: Alle v-on-Zeichen können mit @ abgekürzt werden, z. B. kann v-click mit @click abgekürzt werden.

Mit der Direktive „v-on“ können Sie auf DOM-Ereignisse warten und JavaScript-Code ausführen, wenn diese ausgelöst werden. Im Allgemeinen besteht es darin, auf DOM zu hören, um einige Vorgänge auszulösen. Die nach dem Auslösen dieser Vorgänge (z. B. Klicks) ausgeführten Aktionen (js) können direkt dahinter geschrieben werden

v-on:click="Artikel+=1"

v-wenn

v-if: Bestimmen Sie, ob dieses Element eingefügt werden soll. Dies entspricht dem Zerstören und Erstellen des Elements

v-für

v-für Verwendung v-fo="(item,index) in data" Index Indexelement Indexdaten

1. Iterieren Sie über ein normales Array und definieren Sie ein normales Array in Daten

Daten:{
      Liste: [1,2,3,4,5,6]
}

<p v-for="(item,i) in list">--Indexwert--{{i}} --Jedes Element--{{item}}</p>

2. Iterieren Sie über das Objekt-Array und definieren Sie das Objekt-Array in Daten

Daten:{
      Liste: [1,2,3,4,5,6],
      Listenobjekt:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
      ]
}
//Verwenden Sie die v-for-Anweisung zum Rendern in HTML <p v-for "(uesr,i) in listObj"> 
// id --{{Benutzer-ID}}---Name-->{{Benutzername}}

V-Modell

Sie können die v-model -Direktive verwenden, um eine bidirektionale Datenbindung für (Beschriftungen haben verschiedene Typen, wie z. B. Schaltfläche, Auswahl usw.) und Elemente durchzuführen
v-model ignoriert die Anfangswerte der Attribute value , checked und „ selected “ aller Formularelemente und verwendet immer die Daten der Vue-Instanz als Datenquelle. Den Anfangswert sollten Sie per JavaScript in der Datenoption der Komponente deklarieren:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <Titel>vue</Titel>
</Kopf>
<Text>
    <div id="app">
        <input v-model="Nachricht">
        <p>Der Eingabewert ist: {{message}}</p>
    </div>
    <Skript>
        var app = new Vue({
            el: '#app',
            Daten: {
                Nachricht: „Hallo Welt!“
            }
        })
    </Skript>
</body>
</html>

v-binden

Wird verwendet, um die Attribute von HTML-Elementen dynamisch zu aktualisieren, z. B. ID-Klasse, href, src usw. Abkürzung: v-bind:href Abkürzung: href

<a: href="{{url}}">aa</a>

Hier ist etwas Code v-bind demonstriert.

    <Stil>
        .aktiv{
            Rand: 1px durchgehend rot;
        }
    </Stil>
   
 <div id="app">
      <img v-bind:src="imgSrc" alt="">  
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
 </div>

        var app = new Vue({
            el:"#app",
            Daten:{
                imgSrc:"upload/2022/web/logo.png",
                imgTitle:"Voldemort",
                istAktiv:false
            },
            Methoden: {
                UmschaltenAktiv:Funktion(){
                    dies.istAktiv = !dies.istAktiv;
                }
            },
        })

V-Show

Wenn festgestellt wird, dass ein verstecktes Element versteckt ist, wird dem Stil des Elements „display:none“ hinzugefügt. Es basiert auf CSS-Stilwechsel

Der Unterschied zwischen V-Bind und V-Model

In einigen Fällen müssen wir v-bind und v-model zusammen verwenden:

<Eingabe: Wert = "Name" v-Modell = "Textkörper">

data.name und data.body, welches ändert sich mit welchem? Werden sie überhaupt in Konflikt geraten?
Tatsächlich ist ihre Beziehung dieselbe wie oben erklärt. Die Wirkung von v-bind umfasst keine bidirektionale Bindung, daher besteht die Wirkung von :value darin, value des Attributs value von input gleich dem Wert von data.name zu machen, und die Wirkung von v-model besteht darin, eine bidirektionale Bindung zwischen input und data.body herzustellen. Daher wird erstens der Wert von data.body value von input zugewiesen, und zweitens ändert sich data.body entsprechend, wenn sich der in input eingegebene Wert ändert.
Wie oben erwähnt, sind die folgenden beiden Sätze gleichwertig:

<input v-model="Nachricht">
<input v-bind:value="Nachricht" v-on:input="Nachricht = $event.target.value" />

Damit ist dieser Artikel zur Verwendung von v-Anweisungen in Vue abgeschlossen. Weitere Informationen zur Verwendung von v-Anweisungen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Informationen zur Verwendung der Vue v-on-Direktive
Beispiel für die Verwendung der Filterfunktion der Vue-Direktive v-html
Einfaches Anwendungsbeispiel für die Vue v-text-Direktive
Vue.js-Anweisung v-for-Verwendung und Indexerfassung
Eine kurze Diskussion über die Verwendung von v-on-Ereignisanweisungen in Vue.js
v-cloak-Direktive in Vue.js und detaillierte Verwendung
Vue.js-Anweisung v-for-Verwendung und Indexerfassung

<<: Beheben Sie das Problem, dass beim Mounten von Dateien oder Verzeichnissen der relative Pfad ./ in Docker Run fehlschlägt

>>: WML-Tag-Zusammenfassung

Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign

arcgis.js steuert den Anzeigebereich des Kartenkörpers, sodass dieser automatisch zurückspringt, wenn er den Bereich überschreitet (Implementierungsideen)

Inhaltsverzeichnis Hintergrund Wirkung Ideen Hint...

Analysieren der häufig verwendeten v-Anweisungen in vue.js

Inhaltsverzeichnis

Erklärung des V-Texts bei „if“ für die Modellbindungsanzeige in Vue

v-html:

v-auf

v-wenn

v-für

V-Modell

v-binden

V-Show

Der Unterschied zwischen V-Bind und V-Model

Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11

Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht

Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten

Erklärung der horizontalen und vertikalen Tabellenpartitionierung von MySQL

Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS

HTML realisiert Hotel-Screening-Funktion über Formular

Lösen Sie das Problem des Yum-Installationsfehlers Geschützte Multilib-Versionen

Docker führt Vorgänge mit dem angegebenen Speicher aus

Artikel empfehlen

Zusammenfassung gängiger Befehle für Ubuntu-Server

So kapseln Sie Axios einfach in Vue

So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren

JS realisiert die automatische Wiedergabe der Timeline

Verwenden von js, um den Effekt eines Karussells zu erzielen

arcgis.js steuert den Anzeigebereich des Kartenkörpers, sodass dieser automatisch zurückspringt, wenn er den Bereich überschreitet (Implementierungsideen)

Schritte zum Anpassen der Knoteninstallation, um den Standardinstallationspfad globaler NPM-Module zu ändern

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Detaillierte Erklärung zur Implementierung des sekundären Caches mit MySQL und Redis

Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js

So erstellen Sie eine Testdatenbank mit zig Millionen Testdaten in MySQL

Detaillierte Analyse der Parameterdatei my.cnf von MySQL in Ubuntu

So lösen Sie das Problem der langsamen Geschwindigkeit von MySQL wie bei Fuzzy-Abfragen

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Abfrageprozess und Optimierungsmethode der (JOIN/ORDER BY)-Anweisung in MySQL