So passen Sie Attribute in VueJS an

青灯夜游
Freigeben: 2023-01-11 09:22:32
Original
6045 Leute haben es durchsucht

In vuejs können Sie die Anweisung „v-bind“ verwenden, um Attribute anzupassen. Die Syntax lautet „v-bind:custom attribute name="attribute value"; „v- Die Abkürzung des Befehls „bind“ lautet „:attribute name="attribute value"“, um Attribute anzupassen.

So passen Sie Attribute in VueJS an

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

So fügen Sie benutzerdefinierte Attribute zu Elementen in Vuejs hinzu

Es gibt ein Szenario: v-for rendert eine Liste mit 10 Unterelementen und fügt den Elementen nach dem 5. Unterelement ein Attribut data-wow-delay=' hinzu -item 0.8s‘, die Implementierung ist wie folgt:

...<ul>
    <li v-for=&#39;(item,index) in [1,2,3,4,5,6,7,8,9,10]&#39; 
        :data-wow-delay="index>5?&#39;0.8s&#39;:&#39;&#39;">{{item}}</li></ul>...
Nach dem Login kopieren

Sie können sich eine Methode zum Hinzufügen benutzerdefinierter Attribute zu Elementen ausdenken

<el v-bind:自定义属性名="Boolean?&#39;value1&#39;:&#39;value2&#39;"></el>
Nach dem Login kopieren

Natürlich, wenn Sie nur ein gemeinsames Attribut (CSS-Attribut) wie Klasse hinzufügen, Stil usw. kann auch die folgende Methode verwendet werden.

<el v-bind:class="{&#39;aniamted&#39;:showAnimated}"></el>
Nach dem Login kopieren

Erklärung: v-bind-Anweisung

v-bind wird hauptsächlich für die Attributbindung verwendet. Vue stellt offiziell eine Abkürzung zur Verfügung: bind, zum Beispiel:

<!-- 完整语法 -->
v-bind:属性名="值"
<!-- 缩写 -->
:属性名="值"
Nach dem Login kopieren

Verwandte Empfehlungen: „vue.js-Tutorial

Das obige ist der detaillierte Inhalt vonSo passen Sie Attribute in VueJS an. 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