vuejs2 - 基于选择值的Vue多选CSS

Question

我正在尝试根据值设置输入的多选样式。当我将条件放入 vue 中时，如下所示，我得到了所有 div 的颜色，包括标签这里是我的代码

<custom-select 
  :class="{
    orange : campaignStatus.value ==='ARCHIVED' || campaignStatus.value ==='PAUSED',
    red : campaignStatus.value ==='BANNED' || campaignStatus.value ==='REMOVED'
  }"
  v-model="campaignStatus"
  deselectLabel="Selected"
  label="Status"
  :options="statusOptions" 
  name="status" 
  data-test="campaign-status"
  disabled>
</custom-select>

结果是这样的：

目标是只拥有像这样的多选橙色

问题是我的 html 模板中没有 multiselect.multislect_input 所以我可以根据它的值设置多选的样式吗？例如橙色表示已存档，红色表示已过期？

Answer 1

您必须首先在 css 中有一类颜色。例如：

.orange{color:orange}
.red{color:red }

然后你就可以在 vue 中使用这些类了。喜欢：

:class="{'orange': campaignStatus.value === ARCHIVED , 'red': campaignStatus.value === EXPIRED}"