Can you use Javascript object attributes as an HTML class?

Issue

I'm working on a table that uses various Javascript objects to hold data, something akin to this:

{
 name: toast,
 id: 15,
 style: small,
},
{
 name: bagel,
 id: 17,
 style: medium,
},

Is there any way to use the style attribute in as HTML class that I can create styles on via CSS?

I'm using Vue.js as well, so I'm able to do things like:

<tr v-for="bread in breadBox" :key="bread.id">
 <td> {{bread.name}} </td>
</tr>

My end-goal is for each style to be the class of the <tr> element, so I can then use styles off of it.

Solution

just do

<tr :class="bread.style">

Answered By - regex