如何将<q-select>组件中的Student选项设置为红色？

你可以通过Quasar Q-Select提供的option插槽来自定义单个选项的样式，具体代码修改如下：

<q-select v-model="type" label="Typ"
          :options="[
            { label: 'Teacher', value: 'Teacher' },
            { label: 'Student', value: 'Student' }
            ]"
>
  <template v-slot:append>
    <doc-tag name="Typ"/>
  </template>
  <!-- 自定义选项样式的插槽 -->
  <template v-slot:option="scope">
    <div :style="{ color: scope.option.value === 'Student' ? 'red' : 'inherit' }">
      {{ scope.option.label }}
    </div>
  </template>
</q-select>

说明： #

• v-slot:option="scope" 会暴露当前选项的所有数据到scope.option中，你可以通过它访问选项的label、value等属性。
• 通过动态绑定style，判断当前选项的value是否为Student，如果是则将文字颜色设为红色，否则继承默认样式。

如果你更倾向于用CSS类来控制样式，也可以这么写：

1. 先定义CSS类：

.student-red {
  color: red;
}

2. 修改插槽内容：

<template v-slot:option="scope">
  <div :class="{ 'student-red': scope.option.value === 'Student' }">
    {{ scope.option.label }}
  </div>
</template>

这种方式的好处是样式和结构分离，方便后续维护。

内容的提问来源于stack exchange，提问作者John