Javascript 要添加到类名的Vue.js数组值

我在Vue.js中有一个代码

<li v-for = "record in records" v-bind: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{u date}}

我想将{{record.record\u status\u color}}添加到span class=“chip white text”

因此，它应该根据record.record\u status\u color的值更改颜色

如何在Vue.js中执行此操作

基本上，假设{{record.record\u status\u color}}是绿色的，它应该是这样的

<span class="{{record.record_status_color}} chip white-text">

<span class="green chip white-text">

您可以尝试以下方法：

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

---

您可以在同一元素上同时拥有

class=“…”

和动态绑定

：class=“…”

，其中

class=“…”

中列出的类始终位于元素上，

：class=“…”

中的类取决于您的模型，并根据模型中的情况动态添加/删除

在

：类

绑定中，可以绑定

字符串

、

对象

或

数组

：

<span class="green chip white-text" :class="record.record_status_color">

然后

<div :class="classObject"></div>

<div :class="[ activeClass, errorClass ]"></div>

然后

<div :class="classObject"></div>

<div :class="[ activeClass, errorClass ]"></div>

这将导致

<div class="active text-danger"></div>

甚至可以在数组语法中使用表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

或

关于这一主题的更多信息以及这些例子可在正式文件中找到

---

我个人不喜欢在一个元素上使用

class

和

：class

。您可以使用

：class

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

相等于

<span class="green chip white-text">

：class=“record.record\u status\u color”不同意<代码>：类应该保留用于动态添加/删除/更改类名，而不是用于添加静态类名。很高兴不同意，这就是为什么我将答案作为首选项放在前面。还有助于了解获得问题答案的所有方法。@connexo他正在使用一个带有

记录的动态类。记录\u status\u color

，在末尾添加其他属性只会保存对HTML元素的多个类属性。在我看来，这是正确的方法。在同一个元素上同时使用

class

和

：class

不会导致在同一个元素上出现多个

class

属性。内部

：class

使用

DOMNode.classList.add（）/remove（）

工作，所以这从来都不是问题。我不了解呈现的dom元素，我的意思是在开发过程中-它可能会导致混乱。每个元素都有自己的功能，但如果有开发人员访问我的代码，我更希望他将其视为标准HTML元素，因为您永远不会有多个类。这正是我的喜好，也是你的喜好。

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

<span class="green chip white-text">