Detaillierte Erläuterung der Moustache-Interpolationssyntax und der V-Bind-Anweisung in Vue

Dieser Artikel stellt Ihnen die Moustache-Interpolationssyntax und die V-Bind-Anweisung in Vue vor. Ich hoffe, er kann Ihnen helfen! 1. Schnurrbart-Interpolationssyntax Ich glaube nicht, dass es aussieht wie O( ∩_∩)Ohaha~)

Um Daten in einer Vorlage anzuzeigen, ist die am häufigsten verwendete Syntax die „Mustache“-Syntax (doppelte geschweifte Klammern). Daten werden zum reaktionsfähigen System von In Vue hinzugefügt. (Teilen von Lernvideos:

Vue-Video-Tutorial

)Wenn sich die Daten in den Daten ändern, werden auch die entsprechenden Inhalte aktualisiert.

Mustache kann nicht nur Attribute in Daten sein, sondern auch ein JavaScript-Ausdruck. Wir können schreiben: Wert

Ausdruckternärer Ausdruck

Aufrufmethodenfunktion 2. Bindung Attribute von V-Bind
2.1. Grundlegende Attribute von V-Bind-Bindung
• ⭐⭐

Einseitige Bindung von V-Bind: Daten können nur von Daten zur Seite fließen

   

Wir können v- bind
• zum Binden von Attributen, wie zum Beispiel das dynamische Binden des href-Attributs des a-Elements und des src-Attributs des img-Elements
•   v-bind wird verwendet, um
• einen oder mehrere Attributwerte zu binden
• Props-Wert übergeben* * zu einer anderen Komponente (Requisiten: entspricht der Eingabe einer Komponente, Sie werden später mehr darüber erfahren)

v-bind:href kann geschrieben werden als: href Dies ist der Syntaxzucker von v-bind

 <div id="app">
      <h2>{{message}}</h2>
      <h2>当前计数：{{counter}}</h2>

      <!-- 2.表达式 -->
      <h2>计数双倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

      <!-- 3.三元表达式 -->
      <h2>{{age>=18?"成年人" : "未成年人"}}</h2>

      <!-- 4.调用methods中函数 -->
      <h2>{{formatDate(time)}}</h2>
</div>

2.2 .v-bind-Bindungsklasse

⭐⭐

1. Grundlegende Bindungsklasse

<div id="app">
      <!-- 1.绑定img的src属性 -->
      <button @click="switchImage">切换图片</button>
      <img v-bind:src="showImgUrl" alt="" />
      <!--语法糖 v-bind: = :  -->
      <!-- 2.绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>

3. Grundlegende Verwendung der Objektsyntax

<h2 :class="classes">Hello World</h2>

4 Paare, dynamisch gebundene Klassen können gleichzeitig mit gewöhnlichen Klassen verwendet werden

Wir können v-bind:class ein Objekt geben, um Klassen dynamisch zu wechseln

Natürlich ist v-bind:class auch Kann mit gewöhnlichen Klassenfunktionen koexistieren

• <button :class="isActive ? &#39;active&#39;:&#39;&#39;" @click="btnClick">
  我是按钮
  </button>

• 2.3.v-bind-Bindungsstil
  
  
⭐⭐

1. Gewöhnliche HTML-Schreibmethode

<button :class="{active:isActive}" @click="btnclick">我是按钮</button>

2. Einige Werte im Stil stammen aus Daten

Dynamischer Bindungsstil

<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按钮
</button>

3. Dynamisches Bindungsattribut, dieses Attribut ist ein Objekt ] = "Wert"

<h2 style="color: aqua; font-size: 30px">hhh</h2>

2.5.v-bind bindet das Objekt direkt

⭐⭐Ein Objekt übergeben, das Objekt stammt aus Daten, alle Attribute eines Objekts, gebunden an alle Attribute des Elements

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>

[Empfohlene verwandte Video-Tutorials:
• vuejs-Einführungs-Tutorial
,
• Einführung in das Web-Frontend
]

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Moustache-Interpolationssyntax und der V-Bind-Anweisung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!