Динамическое изменение класса в компоненте vue?

Question

[lacront]

Есть ли возможность динамически изменять класс в компоненте vue? Есть vue:

new Vue({
      el:'.container',
      data:{
        areas: new Array(24),
      }
    })

Компонент:

Vue.component('photos',{
      template:'#template-areas',
      props:['index'],
    })

Передаю в компонент индекс массива:

v-for="(item, index) in areas"
      :key="index"
      :index="index+1"

Нужно, чтобы в зависимости от текущего индекса менялся класс шаблона, т.е что-то типо этого:

template id="template-areas"
      div class=area{{index}}

Comments

[Ярослав Иванов]

Вы документацию как читаете ! С закрытыми глазами ? V-bind описывается на первой странице !

Answer 1

[Мария]

Документация: https://ru.vuejs.org/v2/guide/class-and-style.html

Достаточно добавить v-bind:class="'area' + index"