Vue.js中如何动态为元素class添加数组对象字段值实现样式切换

嘿，这个需求实现起来超简单，Vue提供了灵活的class绑定方案，刚好能完美匹配你的需求，我给你两种常用的实现方式：

方法一：数组语法（最直接省心） #

这种方式特别适合你这种同时需要固定class和动态class的场景，直接把固定的class字符串和动态变量放进数组里就行：

<span :class="['chip', 'white-text', record.record_status_color]">

当record.record_status_color的值是green时，最终渲染出的class就是chip white-text green，完全符合你想要的效果。数组里的元素顺序不影响样式生效——毕竟Materialize的颜色类是用来设置背景色的，和chip的基础样式不会冲突。

方法二：对象语法（适合后续加条件判断） #

如果之后你需要根据某些条件决定是否添加这个动态颜色类，对象语法会更灵活。这里我们把固定class设为true（表示始终添加），动态class用方括号包裹变量名，同样设为true：

<span :class="{ 'chip': true, 'white-text': true, [record.record_status_color]: true }">

方括号的作用是告诉Vue这是一个变量，而不是字面量的class名称，这样就能正确解析record.record_status_color的值了。

完整代码示例 #

把你的代码修改后，完整版本是这样的：

<li v-for="record in records" :key="record.id">
  <div class="collapsible-header">
    <i class="material-icons">date_range</i>
    <h6>{{record.record_date}}</h6> &nbsp &nbsp
    <span :class="['chip', 'white-text', record.record_status_color]">
      <!-- 这里可以添加span的文本内容 -->
    </span>
  </div>
</li>

小提醒：要确保record.record_status_color的值是Materialize支持的颜色类名（比如green、red、amber这类），这样才能正确显示对应的背景色哦～

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