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

【问题标题】：Is there a way to create a statement such as: if (CSS prop === something) then do something else有没有办法创建一个语句，例如： if (CSS prop === something) then do something else
【发布时间】：2021-09-29 11:42:49
【问题描述】：

我有以下 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 的 apple，然后将计算值更改为 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_...)

【问题讨论】：

查看classList.contains()。这就是我相信你所缺少的。
为什么不向<input> 元素添加一个:focus 选择器呢？
... 或 :focus-within CSS 伪类，尽管您可能需要检查浏览器兼容性。

标签： javascript css vue.js for-loop if-statement

【解决方案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>

【讨论】：