Динамическое имя класса

Question

Как создать динамическое имя класса?

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

Этот образец не работает! Мне нужно это имя класса, чтобы обновить div позже !!!

Answer 1

Это помогло мне.

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

Answer 2

Я не знаком с slim-lang, но это то, что вам нужно, чтобы попасть внутрь шаблона Вю:

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

В приведенном выше случае, если isActive вычисляется в true, затем «активный-класс» будут применены. И «static-class» всегда применяется в представлении. Это называется синтаксисом массива.

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

Вы должны убедиться, что slim-lang процессор излучает выше HTML.

Теперь, придя к настройке id, вы не можете использовать привязки атрибутов с использованием синтаксиса усов ({{...}}). Вы должны связать свой id следующим образом:

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

Ссылка: https://vuejs.org/guide/syntax.html#Attributes

Answer 3

Ваш код действительно работает, я думаю, проблема в настройке данных vue. Я тоже люблю тонкий.

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