Can you use Javascript object attributes as an HTML class?-CodePudding

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.

CodePudding user response：

You can bind your classes with :class

new Vue({
  el: '#demo',
  data() {
    return {
      breadBox: [{name: 'toast', id: 15, style: 'small',}, {name: 'bagel', id: 17, style: 'medium',},]
    }
  }
})

.small {
  font-size: 1em;
}
.medium {
  font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table>
    <tr v-for="bread in breadBox" :key="bread.id" :>
      <td>{{ bread.name }}</td>
    </tr>
  </table>
</div>

CodePudding user response：

just do

<tr :>