时间戳

首页 > 解决方案 > 如何仅更改默认选择选项的颜色，而不更改 Vue 中的其他选项？

vue.js - 如何仅更改默认选择选项的颜色，而不更改 Vue 中的其他选项？

问题描述

我正在尝试为默认选择的选项“请选择一个组合”应用不同的颜色（新颜色），而其他组合选项“A”、“B”、“C”、D”应该是黑色。

我只希望禁用的默认选项为绿色，而所有其他选项为黑色。

我们如何做到这一点？我一直在尝试使用条件类，但它适用于所有选项，而不仅仅是第一个默认选项。

  <select
   v-model="comboSet"
   class="combo-padding"
   :class="{ 'new-color': comboSet !== null }"
  >
 <option value="" selected disabled hidden style="color: green"> 
   Please pick a combo
 </option>
 <option
           v-for="option in comboOptions"
           placeholder="Please Select a Combo"
           :value="option"
           :key="option"
           >
          {{ option }}
  </option>
</select>

 data () {
   comboOptions = ["A", "B", "C", D"] 
}

.new-color {
  color: green !important;
}

谢谢您的帮助！

标签： vue.jsselectvuejs2colorsdropdown

解决方案

请记住，选择样式选项是有限的，您可以将类应用于选项元素。条件样式可以像这样应用：

<option
    v-for="(i, index) in items"
    :class="{ steely: styleMe == 1, purple: styleMe != 1 }"
    :key="index">
      {{ i }}
  </option>

模板是：

<template>
  <div>
    <h1>Select example</h1>
    <select
      :class="{ 'new-color': comboSet == 'Default option' }"
      v-model="comboSet">
      <option selected disabled class="new-color">Default option</option>
      <option
        v-for="(i, index) in items"
        :class="{ steely: styleMe == 1, purple: styleMe != 1 }"
        :key="index">
          {{ i }}
      </option>
    </select>
    <button @click.prevent="styleMe = !styleMe">Change</button>
  </div>
</template>

使用如下所示的数据：

data() {
  return {
    items: ["Option One", "Option Two", "Option Three"],
    styleMe: false,
    comboSet: "Default option",
  }
}

样式如下所示：

.new-color {
  color: green;
}

.steely {
  color: steelblue;
}

.purple {
  color: purple;
}

我在这里用条件类创建了一个更完整的例子：code sandbox select example VueJs

希望这是有道理的并回答了这个问题。

推荐阅读