Using variables dynamically in Vue

Question

I would like to know how to use the propriedade of a Objeto to concatenate the string component and become the class name in the v-for

My object:

data(){
    return{
        user: {name:""}
    }
}

I wish my class had the name pencilName

<div v-for="(value, propertyName) in user">
     <div class="'pencil'+propertyName[0].toUpperCase() + propertyName.slice(1)" >
         <strong>{{propertyName}}</strong>
     </div>
</div>

I would like the result to be that:

<div>
     <div class="pencilName" >
         <strong>Name</strong>
     </div>
</div>

Answer 1

To achieve exactly the result you want, through the code, missed only you put the :class or v-bind:class that will work. Below:

<div v-for="(value, propertyName) in user">
    <div :class="'pencil'+propertyName[0].toUpperCase() +  propertyName.slice(1)" >
        <strong>{{propertyName}}</strong>
    </div>
</div>