要添加到類名的 Vue.js JS 數組值

Question

我在 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_status_color}} 添加到 span class="chip white-text"

所以它應該根據 record.record_status_color 的值改變顏色

我如何在 Vue.js 中做到這一點

基本上它應該看起來像這樣假設 {{record.record_status_color}} 是綠色

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

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

Answer 1

我個人不喜歡在一個元素上擁有class和:class 。 您可以使用:class完成所有 3 項操作

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

等於

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

Answer 2

您可以在同一個元素上同時擁有class="..."和動態綁定:class="..." ，其中class="..."中列出的類始終在元素上，而:class="..."中的類:class="..."取決於您的模型，並根據模型中發生的情況動態添加/刪除。

在:class綁定中，您可以綁定String 、 Object或Array ：

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

其中record.record_status_color: 'green'">和一些定義.green元素外觀的 CSS。

對象用於多個類，或用於應用類的條件用法：

classObject: {
  active: true,
  'text-danger': false
}

接着

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

這將解決

<div class="active"></div>

您還可以將數組傳遞給:class ：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

接着

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

這將呈現為

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

您甚至可以在 Array 語法中使用表達式：

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

或者

<div :class="[(new Date().getFullYear() > 2018) ? activeClass : '', errorClass]"></div>

有關該主題的更多信息以及這些示例，可以在官方文檔中找到。

https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 3

你可以試試這個：

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

https://v2.vuejs.org/v2/guide/class-and-style.html