2016-10-31 22 views
4

Wie wird ein dynamischer Klassenname generiert?Name der dynamischen Klasse

li v-for='obj in objs' 
    | {{ obj.id }} {{ obj.title }} 
    div id="obj-{{ obj.id }} " style="float:right; color:red;" 

Dieses Beispiel funktioniert nicht! Ich brauche diesen Klassennamen, um das Div später zu aktualisieren !!!

Antwort

13

Das hat mir geholfen.

div :class="['obj-' + obj.id]" style="float:right; color:red;" 
10

Ich bin nicht vertraut mit slim-lang, aber das ist, was Sie in der Vue-Vorlage erhalten müssen:

<div v-bind:class="['static-class', { 'active-class' : isActive }]">...</div> 

Im obigen Fall, wenn isActive zu true auswertet, dann ‚aktiv-Klasse‘ Wird angewendet werden. Und 'statische Klasse' wird immer in der Ansicht angewendet. Dies wird als Array-Syntax bezeichnet.

Ref: https://vuejs.org/guide/class-and-style.html#Array-Syntax

Sie müssen sicherstellen, dass der slim-lang Prozessor die oben html emittiert.

Nun zum Festlegen einer id, können Sie keine Attributbindungen mit Schnurrbart ({{...}}) Syntax tun. Sie benötigen id zu binden, wie folgt:

<div v-bind:id="dynamicId"></div> 

Referenz: https://vuejs.org/guide/syntax.html#Attributes

+0

I i Ihre Beispiele nicht sicher bin, verstehen, ich brauche nicht bedingten Klassen zu verwenden, i statische Drucker brauchen. – NeverBe

1

Ihr Code tatsächlich funktioniert, ich denke, das Problem ist Vue Dateneinstellung. Ich liebe auch schlank.

div#posting 
    li v-for='obj in objs' 
    | {{ obj.id }} {{ obj.title }} 
    div id="obj-{{ obj.id }}" class="obj-{{ obj.id }} " style="float:right; color:red;" 

javascript: 
    var posting; 
    posting = new Vue({ 
    el: '#posting', 
    data: { 
     objs: 
     [ 
      {id: 1, title: 'xx'}, 
      {id: 2, title: 'yy'}, 
     ] 
    } 
    }); 

web image show