Dynamic class change in vue component?

Question

Vue.js

Is it possible to dynamically change a class in a vue component? There is vue:

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

Component:

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

I pass the array index to the component:

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

It is necessary that, depending on the current index, the template class changes, i.e. something like this:

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

Answer 1

Documentation: https://ru.vuejs.org/v2/guide/class-and-style.html
Just addv-bind:class="'area' + index"