Vue.js中能否将JavaScript对象属性作为HTML元素class使用

完全可以实现，Vue 内置的动态 class 绑定能力原生支持这个场景，操作非常简单：

• 首先注意修正数据源的格式问题：你给出的示例对象里字符串值没加引号，JS 运行时会把 toast、small 这类值当成未声明的变量抛错，实际写的时候要给字符串类型的值加上引号，正确格式如下：

const breadBox = [
  {
    name: 'toast',
    id: 15,
    style: 'small',
  },
  {
    name: 'bagel',
    id: 17,
    style: 'medium',
  }
]

• 直接在<tr>标签上通过v-bind:class（简写:class）绑定当前循环项的style属性即可，修改后的模板代码：

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

页面渲染后会自动给每一行<tr>加上对应类名，生成的DOM结构类似：

<tr class="small">
  <td>toast</td>
</tr>
<tr class="medium">
  <td>bagel</td>
</tr>

• 之后你直接在CSS里编写对应类名的样式规则就能实现定制化展示，举个例子：

.small {
  line-height: 36px;
  font-size: 12px;
  background: #f5f5f5;
}
.medium {
  line-height: 48px;
  font-size: 14px;
  background: #fff;
}

如果后续需要叠加固定公共类名、或者按条件切换类名，也可以用数组/对象语法扩展绑定逻辑，比如同时给所有行加公共类data-tr：

<tr v-for="bread in breadBox" :key="bread.id" :class="['data-tr', bread.style]">
  <td>{{ bread.name }}</td>
</tr>

内容的提问来源于stack exchange，提问作者ohkdevlop