Dynamic class name

I am not familiar with slim-lang, but this is what you need to get inside the Vue template:

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

In the above case, if isActive evaluates to true, then 'active-class' will be applied. And 'static-class' is always applied in the view. This is called array syntax.

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

You need to ensure that the slim-lang processor emits the above html.

Now, coming to setting an id, you cannot do attribute bindings using moustache ({{...}}) syntax. You need to bind your id as follows:

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

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

This helped me.

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

Your code actually work, i guess the problem is vue data setting. I love slim too.

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

For multiple classes:

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