在循环中有条件地应用 CSS - VueJS

Question

我有一个 JSON 我在我的 vue 组件中导入的项目列表，我循环遍历该文件以显示它们。每个项目属于特定的 'group' :

见IMG

例如:

{
"type": "Simple list",
"title": "Simple list",
"id": 1,
"group": "list-component",
"properties": "lorem lipsum"
},

我想根据其组对每个项目应用 CSS 'border-top-color'。

我试图在 mouted(){} 时应用条件，但我不确定我是否做对了。这是我的尝试：

模板（我用的是VueDraggable，不用介意）:

          <div class="item drag" :key="element" :style="[{ 'border-top-color': 'brdrTpClr' }]">
            {{ element.title }}
            <div class="addico" :key="index">
              <i class="fas fa-add"@click="$emit('pushNewElt', element.id)"></i>
            </div>
          </div>

脚本 :

data() {
    return {
      dragItems: dragItemsList,
      brdrTpClr: "",
    };
  },
  mounted() {
    for (let i = 0; i <= 15; i++) {
      if (this.dragItems[i].group == "list-component") {
         // I'm not sure how to do it
        // the color I want to apply : #00A3A1b
      } else if (this.dragItems[i].group == "location-media-component") {
        // #005EB8
      } else if (this.dragItems[i].group == "container-component") {
        // #0091DA
      } else if (this.dragItems[i].group == "UI-component") {
        // #6D2077
      } else if (this.dragItems[i].group == "reader-scanner-component") {
        // #470A68
      }
    }
  },

我使用的是 i<=15 而不是 i<=this.dragItems.length 因为有一个 bug，也不要介意。

Answer 1

我会创建一个名为 getBorderColor(item) 的方法，其中 returns 颜色基于组，然后使用 Vue 动态绑定它。

<div 
  class="item drag" 
  :style="[{ 'border-top-color': getBorderColor(element) }]"
>
  {{ element.title }}
  // Add icon etc.
</div>

getBorderColor(element) {
  // Can use a switch statement, but here's a simple ternary if/else as an example
  return element.group === "list-component" ? `#00A3A1b`
  : element.group === "location-media-component" ? `#005EB8`
  : element.group === "container-component" ? `#0091DA`
  : element.group === "UI-component" ? `#6D2077`
  : element.group === "reader-scanner-component" ? `#470A68`
  : `#000000`; // Default colour
}

或者为了更清晰的选择，您可以在 data 中拥有一个对象，其中您的组作为键，颜色作为值，例如

return {
  dragItems: dragItemsList,
  brdrTpClr: "",
  colors: {
    "list-component": `#00A3A1b`,
    "location-media-component": `#005EB8`,
    // etc.
  },
};

getBorderColor(element) {
  return this.colors[element.group] || `#000`;
}

Answer 2

可能最有效（性能方面）和最易读的解决方案是在组件外部声明一个常量 colorMap，然后 return 使用以下方法声明正确的值或回退：

<script>
const colorMap = {
  "list-component": '#00A3A1',
  "location-media-component": '#005EB8',
  "container-component": '#0091DA',
  "UI-component": '#6D2077',
  "reader-scanner-component": '#470A68'
}
export default { 
  //...
  methods: {
    borderColor(group) {
      return colorMap[group] || '#000'
    }
  }
}
</script>
<template>
  ...
  <div :style="{borderColor: borderColor(element.group)}">
    content...
  </div>
</template>

作为一般规则，您想在模板之外获取任何比简单三元组更复杂的东西，并通过 computed 或 methods.

提供它

旁注：上述方法也可以写成computed:

   computed: {
     borderColor: group => colorMap[group] || '#000'
   }

如果您发现自己在多个组件中需要 colorMap，请将其从 constants.(js|ts) 文件中导出并在需要的任何地方导入。我通常将该文件命名为 helpers，因为它通常还包含静态函数或映射（我在多个 components/modules 中重复使用的任何内容）。

重要提示：您当前正在将数组传递给 :style。你应该传递一个对象。

在循环中有条件地应用 CSS - VueJS

Apply CSS conditionally in a loop - VueJS

javascript

css

binding

class

vue.js