In diesem Artikel erfahren Sie hauptsächlich, wie vue.js jedes Element in der Liste steuert. Ich hoffe, es kann Ihnen helfen.
zB:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <p v- for = "(i,index) in resultful_list" class = "my_similar_collect_p" >
<p v-bind: class = "{add_class:i.isActive}"
style= "height: 200px; font-size: 14px; width: 100%; color: rgb(122,122,122);" class = "old_class" >
<p style= "margin-top: 8px;" >
<span style= "color: rgb(64,158,255);" >:</span>
<span v- if = "x.name.length<70" v- for = "x in i.disease.disease"
style= " display:inline-block;font-size: 14px; margin-right:5px;color:#7A7A7A;" >
<span v- if = "x.name" >{{x.name}}</span>
</span>
<span v- if = "i.disease.disease" ></span>
<span v- else >无</span>
<span v- if = "x.name && x.name.length>=70" v- for = "x in i.disease.disease"
style= " display:inline-block;font-size: 14px; margin-right:5px;color:#7A7A7A;" >
{{x.name.substring(0,70) + '...'}}</span>
</p>
</p>
</p>
|
Nach dem Login kopieren
Wie oben möchte ich in einer Listenschleife (v-for) die Änderungen jedes Elements in der Liste steuern. Wir müssen die Klasse daran binden
1 | v-bind: class = "{add_class:i.isActive}"
|
Nach dem Login kopieren
add_class ist die Klasse, die wir hinzufügen möchten, und i.isActive ist der Schlüssel zur Steuerung jedes Elements.
Hinweis:
Wir müssen sicherstellen, dass das Array, das wir durchlaufen, das isActive-Attribut hat und ihm einen Anfangswert zugewiesen hat. Andernfalls müssen wir das Attribut isActive manuell hinzufügen.
1 2 3 4 | var obj = {
isActive:false,
}
resultful_list.push(obj);
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie vue.js jedes Element in der Liste steuert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!