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

Question

我有一个JSON列表的项目，我导入到我的价值组件，我遍历该文件以显示它们。每个项目属于一个特定的'组':

看到IMG

。:

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

我想应用一个CSS 'border-top-color'的每个项目根据它的组。

我试图在mount(){}时应用条件，但我不确定我是否做得对。下面是我的尝试:

模板(我用的是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。长度因为bug，也不用介意。

Answer 1

可能最有效(性能方面)和最易读的解决方案是在组件外部声明一个常量colorMap，然后使用方法返回正确的值或回滚:

<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，因为它通常还包含静态函数或映射(我跨多个组件/模块重用的任何内容)。

重要的

---

:你目前正在传递一个数组给:style。你应该传递一个对象。

Answer 2

我将创建一个名为getBorderColor(item)的方法，该方法根据组返回颜色，然后使用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`;
}