Javascript vuejs循环上的随机背景色

帮个小忙，我就卡住了。我甚至不知道如何开始。 我有这个v-for来打印我的“合同”。 我还没有完全沉浸在vuejs工作流中，所以我无法解决这个问题

我如何给每个col div提供不同的背景色？但不是随机的，我想让他们保留颜色，即使页面被重新加载，我的Approach使用了我合同的id，并用它做了一些事情，但我不太了解vuejs，不知道如何做

假设我想创建一个javascript函数，根据contractType.id给出一个类，那么如何在每个循环中执行该函数？在vuejs上是否有适当的方法执行此操作

<template>
  <div class="row" v-if="contractTypes && contractTypes.length > 0">
    <div class="col-md-4 c-button" v-for="(contractType, index) in contractTypes" :key="index" @click="choose($event.srcElement.innerHTML, index, contractType.id)">
      <div class="col p-4 d-flex flex-column position-static text-center">
          <strong class="d-inline-block mb-2 text-primary">World</strong>
          <h3 class="mb-0">{{ translations && translations[contractType.id] ? translations[contractType.id].usecasetitle : contractType.usecasetitle }}</h3>
          <p class="card-text mb-auto">{{ translations && translations[contractType.id] ? translations[contractType.id].description : contractType.title }}</p>
          <button class="btn btn-primary">Click</button>
        </div>
    </div>
  </div>
  <div v-else>
    <h1>Leider stehen für Sie derzeit keine Verträge zur Auswahl.</h1>
  </div>
</template>

World
{{translations&&translations[contractType.id]？translations[contractType.id].usecasetitle:contractType.usecasetitle}
{{translations&&translations[contractType.id]？translations[contractType.id]。说明：contractType.title}
点击
莱德·斯泰恩·弗尔（Leider stehen fürérét keine Verträge zur Auswahl）。

如果您希望在不同的合同类型上使用自定义样式，可以使用

方法

：

/*
 * @param {string} contract -- a foo bar
 * @return {object} -- Bunch of boolean controlled classes
 */
getContractClasses (contract)
{
  return {
    'style1': contract === 'a string',
    'style2': contract === 'another thing',
    'style3': true, // This one is always going to be on and will have a bunch of shared styles between all of them
  }
},

然后，在模板中

<h3 :class="getContractClasses(contract)">

最后，只需在容纳

v-for

的组件中的样式指南中执行不同的样式即可

---

另外，我是否可以建议使用一种不成文的排序规则来删除模板层中的所有逻辑，并将其作为一种方法或计算方法？阅读这么长的三元内联对我来说是一个巨大的“不，谢谢”。

也许我必须为循环做一个子组件？有几种方法可以做到这一点。特定ID是否具有特定的颜色？还是仅基于项目位置（例如，第一个项目为红色，第二个项目为蓝色等）？否，可以是任何颜色。我想使用id只是为了让相同的id保持相同的颜色，但是任何颜色都可以。哦，好吧，我明白了，每次打印一个div时，都会调用getClasses函数返回一个值，因为它是开着的：class，所以value get被添加到元素的类中。和'style1'：“contract==='a string'”是条件句（很酷，很简约，哈哈）。因此，我可以根据contractType.id提供不同的样式。谢谢，这对我来说很简单，我会玩的。谢谢你的推荐，实际上这不是我的代码，我还不完全理解它。@arderoma听起来你明白了。感谢您跟进反馈并接受答案。@为了确保没有混淆，

style1

实际上不是一种样式，而是应用样式的类名。所以在样式指南中，会有

.style1{background:red；}

。是的，我知道了。