Nom de classe dynamique

Question

Comment générer un nom de classe dynamique?

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

Cet échantillon ne fonctionne pas! J'ai besoin de ce nom de classe pour mettre à jour la div plus tard !!!

Answer 1

Cela m'a aidé.

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

Answer 2

Je ne connais pas slim-lang, mais c’est ce dont vous avez besoin pour entrer dans le modèle Vue:

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

Dans le cas ci-dessus, si isActive est évalué à true, alors 'active-class' sera appliqué. Et 'static-class' est toujours appliqué dans la vue. Ceci s'appelle la syntaxe de tableau.

Réf.: https://vuejs.org/guide/class-and-style.html#Array-Syntax

Vous devez vous assurer que le slim-lang le processeur émet le code HTML ci-dessus.

Maintenant, en ce qui concerne la définition de id, vous ne pouvez pas faire de liaisons d’attributs avec moustache ({{...}}) syntaxe. Vous devez lier votre id comme suit:

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

Référence: https://vuejs.org/guide/syntax.html#Attributes

Answer 3

Pour plusieurs classes:

:class="{'form-control':true,['box_'+index]:true}"

Answer 4

Votre code fonctionne réellement, je suppose que le problème est vue paramètre de données. J'aime aussi slim.

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'},
        ]
    }
  });