Javascript 每次事件发生时，随机数都会发生变化

所以我的数据中有这个颜色数组，我使用

Math.random（）

从中得到一个随机元素，问题是每次我点击

随机的颜色变化。 这是我的代码（我简化了它）：

---

我的问题是，当我单击某些内容或更改某些数据时，是否可以阻止vue更新随机数？

您不想在自己的样式中使用随机函数。这种风格将被无限次地使用

---

而是在页面加载时创建一个由随机函数填充的变量。然后使用该变量定义样式。

< P>如果数据属性或计算属性，当单击“自动完成”时，彩色div引用不会改变，您可以考虑以下两种解决方案：

解决方案1:

使用指令：

在Vue中呈现普通HTML元素非常快，但有时 可能有一个包含大量静态内容的组件。在这些 在这种情况下，您可以确保只对其求值一次，然后由缓存 将v-once指令添加到根元素

Vue.use（vautomplete.default）
新Vue({
el:“应用程序”，
数据（）{return{
项目：[
{
姓名：“a”
},
{
姓名：“b”
},
{
名称：“c”
}
],
颜色：[
“#C004D9”，
“#AB05F2”，
“#A69C0F”，
“#2745F2”，
“#1B78F2”，
“#F2BE22”，
“#F2E635”，
“#F29849”，
“#2405F2”，
“#6503A6”，
"#010440",
“#F2E74B”
],
类型：[“用户”、“管理员”、“经理”]，
过滤器：[]
}}
})

<template>
  <div>
    <div
    :key="index"
    style="width:200px;height:200px;"
    :style="'background-color:' + colors[Math.floor(Math.random() * 10)]"
    v-for="(item, index) in items"
   >
  </div>
  <v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete>
</div>
</template>

data: () => ({
 items: [
  {
    name: "a"
  },
  {
    name: "b"
  },
  {
    name: "c"
  }
 ],
 colors: [
  "#C004D9",
  "#AB05F2",
  "#A69C0F",
  "#2745F2",
  "#1B78F2",
  "#F2BE22",
  "#F2E635",
  "#F29849",
  "#2405F2",
  "#6503A6",
  "#010440",
  "#F2E74B"
  ],
  types: ["user", "admin", "manager"]
})