Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue implementiert die aktive Klick-Umschaltmethode

亚连
Freigeben: 2018-05-29 17:43:13
Original
6192 Leute haben es durchsucht

Im Folgenden werde ich einen Artikel über die Implementierung von aktivem Klickwechsel in Vue veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Schleifensituation:

1. Übergeben Sie den Index beim Klicken (ermitteln Sie, welcher gerade angeklickt wird)

@click="active(index)"
Nach dem Login kopieren

2. Übergeben Sie den Indexwert an die Klasse (fügen Sie die aktive Klasse entsprechend dem Indexwert hinzu)

:class="{active:index==ins}"
Nach dem Login kopieren

3. Fügen Sie Ins hinzu: 0 in Daten (was bedeutet, dass die aktive Klasse standardmäßig zuerst hinzugefügt wird)

data{ ins:0 }
Nach dem Login kopieren

4. Fügen Sie schließlich Methoden in Methoden hinzu

ctive (num) {
this.ins=num
}
Nach dem Login kopieren

Nichtzyklische Situation:

1 Schreiben Sie das Klickereignis und den hinzugefügten Klassenstil

Hinweis: :class="{active:shows==1}" bedeutet, dass class=active hinzugefügt wird, wennshows==1, andernfalls wird es nicht hinzugefügt.

2. Definieren Sie die Methode in Methoden

Der Effekt ist wie folgt:

Das ist Klicken Sie hier, um den Effekt zu wechseln.

Zusätzlich:

Verwenden Sie drei Holzoperatoren, um die Filterpfeilumschaltung zu implementieren

Ich habe es oben für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der ElTableColumn-Erweiterung von VUE in element-ui

Time-Sharing-Funktion für Javascript-Leistung Optimierungseinführung

Detaillierte Erläuterung der benutzerdefinierten dynamischen Komponenteninstanzen von Vue

Das obige ist der detaillierte Inhalt vonVue implementiert die aktive Klick-Umschaltmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage