javascript - 有没有办法创建一个语句，例如： if (CSS prop === something) then do something else

Question

我有以下 CSS 属性可以更改项目的背景颜色（让我们将此项目称为苹果）：

.colour_1 {
    background-color: #677794;
    color: white;
}

.colour_2 {
    background-color: lightgreen;
}

.colour_3 {
    background-color: yellow;
}

.colour_4 {
    background-color: purple;
    color: white;
}

下面是一个计算属性，它改变了不同组件的轮廓颜色。

highlightWhenEditing() {
    return 'highlight_when_editing';
},

这是创建使用上述类的卡的代码。它在 TextField.vue 组件内部：

<v-card flat :class="`${highlightWhenEditing}`">
    <v-text-field v-model="someModel"/>
</v-card>

这是它在前端的样子，每个字段都由一个 v-text-field 表示：

目前计算值返回 highlight_when_editing 这是属性：

.highlight_when_editing {
    border: 3px solid #268FCE !important;
}

但是，它需要根据项目的 colour_... 类返回以下内容之一。

.editor_outline_colour_1 {
    border: 3px solid #677794;
    color: white;
}

.editor_outline_colour_2 {
    border: 3px solid lightgreen;
}

.editor_outline_colour_3 {
    border: 3px solid yellow;
}

.editor_outline_colour_4 {
    border: 3px solid purple;
    color: white;
}

.editor_outline_colour_5 {
    border: 3px solid peachpuff;
}

例如，对于具有类 colour_1 的苹果，然后将计算值更改为 editor_outline_colour_1。

这是它在代码中的外观示例：

highlightWhenEditing() {
if(class of apple = colour_1)
    return 'editor_outline_colour_1';
else if(class of apple = colour_2)
    return 'editor_outline_colour_2';
else if(class of apple = colour_3)
    return 'editor_outline_colour_3';
else if(class of apple = colour_4)
    return 'editor_outline_colour_4';
},

或者

for (let i = 0; i <= this.mentionsColorHighlight.length; i++) {
    let mentionsColourHighlightNumber = this.mentionsColorHighlight.slice(-1);
    return `editor_outline_colour_${mentionsColourHighlightNumber}`;
}  

mentionsColorHighlight() {
    let allColourHighlights = ['colour_1','colour_2','colour_3','colour_4','colour_5'];
    return allColourHighlights[this.arrOfObj?.filter(el => el?.type === 'flower').length % allColourHighlights.length];
},

但是我不确定如何写 if(class of apple = colour_...)

标签： javascriptcssvue.jsfor-loopif-statement

Answer 1

你能澄清一下你是如何.colour_1为你的课程设置的v-text-field吗？

在我看来你可以做这样的事情：

<v-card flat :class="`${highlightWhenEditing('colour_1')}`">
    <v-text-field v-model="someModel" :class="colour_1" />
</v-card>

接着

highlightWhenEditing(class) {
if(class === 'colour_1')
    return 'editor_outline_colour_1';
else if(class === 'colour_2')
    return 'editor_outline_colour_2';
else if(class === 'colour_3')
    return 'editor_outline_colour_3';
else if(class === 'colour_4')
    return 'editor_outline_colour_4';
},

或者更好的是，您可以创建匹配类的地图：

highlightClasses = {
    'colour_1':'editor_outline_colour_1',
    'colour_2':'editor_outline_colour_2',
    'colour_3':'editor_outline_colour_3',
    'colour_4':'editor_outline_colour_4',
}
<v-card flat :class="`${highlightClasses['colour_1']}`">
    <v-text-field v-model="someModel" :class="colour_1" />
</v-card>