Analyse der Klassen- und Stilbindung sowie der bedingten und Listenwiedergabe in Vue

Dieser Artikel teilt mit Ihnen die Analyse der Klassen- und Stilbindung sowie der Bedingungs- und Listenwiedergabe in Vue. Freunde in Not können sich darauf beziehen

Ziel:

1. Kompetent im Umgang mit verschiedenen Methoden der Klassen- und Stilbindung

2. Vertraut mit der Verwendung von v-if und v-for sowie den Vorsichtsmaßnahmen für die Verwendung von v-if und v- für zusammen

Viele Möglichkeiten, Klasse und Stil zu binden

1. Sowohl Klasse als auch Stil werden mit V-Bind gebunden, das heißt:

2. Ob es sich um eine Bindungsklasse oder einen Stil handelt, es gibt zwei Möglichkeiten, eine ist ein Objekt und die andere ist ein Array

3. class und :class sind Koexistierende

Bindungsbeispiel

1.Klasse-Objektbindung

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
    <p :class="{activity:isActivity}"></p>

2.Klasse-Array-Bindung

    <!-- 应用数组里面的class -->
    <p :class="[activity, activityOne]"></p>

3.Klasse-Objektbindung

    <!-- 应用这个样式对象的样式 -->
    <p :style="styleObj"></p>  
    
    <script>
    ...
    //styleObj写在data里面
    data() {
        return {
            styleObj: {
                color: &#39;black&#39;
            }
        }
    }
    ...
    </script>

Array-Bindung im 4. Stil

    <!-- 应用这个数组里面的样式 -->
    <p :style="[styleObj,{fontSize:&#39;25px&#39;}]"></p>

Verwendung von v-if und v-for

Bedingtes Rendering

1 ", der wahre oder falsche Wert des Ausdrucks bestimmt, ob er auf der Seite bereitgestellt wird

     <p v-if="isTrue">这一段会在html里面,而且会显示出来</p>
     <p v-if="isFalse">这段不会在html里面,也不会显示出来</p>

2.v-show="Ausdruck", der wahre oder falsche Wert des Ausdrucks bestimmt, ob das Anzeigeattribut von Der Knoten ist keiner / Block

     <p v-show="isTrue">display: block,会显示出来</p>
     <p v-show="isFalse">display: none,不会显示出来</p>

3. Unterschied: Die Funktionen sind die gleichen, unabhängig davon, ob der Knoten angezeigt wird oder nicht, aber v-if bedient den Dom und rendert die Seite neu

4. Für v-if gibt es zwei Befehle: v-if-else und v-else, sie müssen jedoch zusammen verwendet werden, ohne durch etwas anderes getrennt zu werden. Die Verwendungsregeln sind die gleichen wie bei der if..else-Anweisung js

Listenrendering

1.v-für

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list为数组,index为索引(第一个0开始),item为数组元素

2. Schleifenrenderingobjekt

     //其中userInfo为对象, item为值, key为键, index为索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3 Vermeiden Sie gegenseitige Beeinflussung (Syntax Die Erkennung erkennt dies. Nach dem Hinzufügen des Schlüsselwerts werden sie voneinander unterschieden und die gleichen Teile werden erneut gerendert und nicht wiederverwendet)

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>

4 index sind optional

v -Hinweise zur gemeinsamen Verwendung von if und v-for

1 Wenn sie sich auf demselben Knoten befinden, v-for. if wird wiederholt in der v-for-Schleife ausgeführt. Das heißt, v-for wird zuerst ausgeführt, und jedes Element, das aus v-for kommt, wird v-if einmal ausgeführt . Wenn Sie zuerst v-if und dann ausführen möchten, können Sie v-if auf dem äußeren Element (oder der Vorlage) platzieren:

Vorlagensyntax und berechnete Eigenschaften von Vue, Analyse des Listeners

Analyse der Vue-Instanz

Das obige ist der detaillierte Inhalt vonAnalyse der Klassen- und Stilbindung sowie der bedingten und Listenwiedergabe in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!