我有一個我在我的 vue 組件中匯入的專案的 JSON 串列，我回圈通過該檔案以顯示它們。每個專案都屬于一個特定的“組”：
見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 ，也不要介意。
uj5u.com熱心網友回復：
可能最有效（性能方面）和最易讀的解決方案是在組件外部宣告一個常量 colorMap，然后使用以下方法回傳正確的值或回退：
<script>
const colorMap = {
"list-component": '#00A3A1b',
"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. 你應該傳遞一個物件。
uj5u.com熱心網友回復：
我會創建一個名為的方法getBorderColor(item)，它根據組回傳顏色，然后使用 Vue.js 動態系結它。
<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`;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481878.html
標籤：javascript css Vue.js 班级 捆绑
上一篇：使用地圖功能驗證資料