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

Das Prinzip und die Implementierung des JS-Drag-Effekts

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

Das Prinzip und die Implementierung des JS-Drag-Effekts

CSS3-Übergang zum Erreichen des unterstrichenen Beispielcodes

Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen

So entfernen Sie die Unterstreichung eines Hyperlinks anhand von drei einfachen Beispielen

So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V

Absatzlayout und Zeilenumbrüche in HTML-Webseiten

So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung

20 hervorragende Beispiele für die Farbabstimmung auf ausländischen Webseiten

Zusammenfassung der Wissenspunkte zu den Linux-Befehlen ps und pstree

Artikel empfehlen

Detaillierte Erläuterung der zehn am häufigsten verwendeten Zeichenfolgenfunktionen in MySQL

Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)

Konfigurationsmethode für die SystemC-Umgebung unter Linux

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Docker-Bereitstellung – Springboot-Projektbeispielanalyse

Lösung zur Schnittstellenverformung beim Einstellen der Frameset-Höhe

Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen

Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll

MySQL-Fall bei der Verwendungsbeispielanalyse

Ubuntu 18.04 fordert bei der Installation von MySQL nicht zur Eingabe eines Kennworts auf und wie man das Problem löst

Tutorial zur Installation von MySQL 5.7.9 mit RPM-Paket unter CentOS 7

Das Konzept von MTR in MySQL

MySQL-Joinpufferprinzip

Detaillierte Erklärung der Filter und Anweisungen in Vue

4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen