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

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

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

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

Gedanken- und Erfahrungsaustausch zum interaktiven Design von Leselisten für Informationsprodukte

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit

So implementieren Sie eine einzelne Dateikomponente in JS

So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen

Kombinieren von XML- und CSS-Stilen

Grafisches Tutorial zur Installation der dekomprimierten Version von mysql5.7.14

So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

Artikel empfehlen

Zusammenfassung der Verwendung von drei For-Schleifenanweisungen in JavaScript (for, for...in, for...of)

MySQL 4-Methoden zum Importieren von Daten

Detaillierte Erklärung zur Verwendung von Teleport in Vue3

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion

Lernen Sie, wie Sie mit vscode eine React-Native-Entwicklungsumgebung erstellen

So gehen Sie mit dem Problem um, dass die Datei gelöscht wird, der Speicherplatz in Linux jedoch nicht freigegeben wird

Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte

Codebeispiele für den Import und Export von Docker-Images

Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme

So verwenden Sie DCL zum Verwalten von Benutzern und Steuern von Berechtigungen in MySQL

So implementieren Sie ein Hover-Dropdown-Menü mit CSS

Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)

MySQLs konzeptionelles Verständnis verschiedener Sperren

Implementierung und Optimierung von MySql-Unterabfragen IN